Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

web development.pdf

•
•
B
BagHarki

Web Development covers HTML, CSS, JavaScript, PHP, and MySQL. HTML defines the structure and layout of a web page using tags like <h1> for headings and <p> for paragraphs. Attributes provide extra information about elements, like images using the "src" attribute. Links are created with <a> tags and the "href" attribute. Frames divide pages into multiple sections using the <frameset> tag.

1 of 31
Download to read offline
Web Development Programming By: Gheyath M. Othman 2018-2019
This Course Will Cover ▪ HTML (Hyper Text Markup Language) ▪ CSS (Cascading Style Sheets) ▪ JS (Java Script ) with Jquery & AJAX (Asynchronous Java script and XML) ▪ PHP ( Hyper text Preprocessor) ▪ MySQL ( Structured Query Language)
HTML … Introduction • HTML stands for Hyper Text Markup Language. • An HTML file is a text file containing small markup tags. The markup tags tell the Web browser how to display the page. ▪ The extension of an HTML file is htm or html ▪ It is not a programming language in the traditional sense, but rather a set of instructions about how to display content. The computer application that translates this description is called a Web browser.
HTML … Versions In 1980, physicist Tim Berners-Lee, who was a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents.
HTML … Elements ▪ HTML documents are text files made up of HTML elements. ▪ HTML elements are defined using HTML tags. HTML Tags • HTML tags are keywords (tag names) surrounded by angle brackets: • HTML tags normally come in pairs like <b> element content </b> • First tag in a pair is the start tag, the second tag is the end tag • HTML tags are not case sensitive, <H1> means the same as <h1>. <tagname>content</tagname>
HTML … Elements *** Note *** • If you want to follow the latest web standards, you should always use lowercase tags. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML recommendation . • Even if you write some tags without closing it, may work in most of the browsers.but don't rely on it. Future version of HTML will not allow you to skip ANY end tags. • Closing all HTML elements with an end tag is a future-proof way of writing HTML. It also makes the code easier to understand.
HTML … Basic Structure The basic structure for all HTML documents is the same and should include the following minimum elements and tags: • The DOCTYPE declaration defines the document type to be HTML • The text between <html> and </html> describes an HTML document <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> The content of the page… </body> </html>
HTML … Basic Structure • The text between <head> and </head> provides information about the document • The text between <title> and </title> provides a title for the document or you can use the <link> tag to make an image as an title of the document <link rel="shortcut icon" href="your_image_path_and_name.ico" /> • The text between <body> and </body> describes the visible page content. Like1
HTML … Basic Tags The most important tags in HTML are tags that define headings, paragraphs and line breaks. Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. HTML automatically adds an extra blank line before and after a heading. example2 <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <h2>This is a Heading</h2> <h3>This is a Heading</h3> <h4>This is a Heading</h4> <h5>This is a Heading</h5> <h6>This is a Heading</h6> </body> </html>
HTML … Basic Tags Paragraphs Paragraphs are defined with the <p> tag. HTML automatically adds an extra blank line before and after a paragraph. <p>This is a paragraph</p> <p>This is another paragraph</p> Line Breaks (<br> or <br /> ) The <br > tag is used when you want to break a line. The <br> tag forces a line break wherever you place it. The <br> tag is an empty tag. It has no end tag like </br>. example3 <p>This <br> is a para<br>graph with line breaks</p>
HTML … Basic Tags <!--[if IE 8]> This text will be displayed only in IE 8 <![endif]--> Horizontal lines (<hr> ) It defines a horizontal rule example4 Comments in HTML The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. Conditional Comments Defines HTML tags to be executed by Internet Explorer only. <!-- This is a comment -->
HTML … Attributes • HTML elements can have attributes which provide additional information about an element • Attributes are always specified in the start tag • Attributes come in name/value pairs like: name="value“ example5 <body dir=“ltr”> <p title="web programming"> web programming include HTML,CSS,SQL,ASP,PHP..</p> NOTE: not all tags accept attributes or all attributes
HTML … Attributes (examples) The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image. Bgcolor: Specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name. Text : Specify the text color for the document and it use the same values of bgcolor attribute. <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"> <body text="#000000"> Example 5-1
HTML … Attributes (examples) background: • Specifies a background-image for an HTML page. • The value of this attribute is the URL of the image you want to use. • If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window <body background="img.jpg"> <body background="http://www.example.com/clouds.gif"> Example 5-2
HTML … Attributes Some attribute samples: align= (center, left, right) valign= (middle, top, bottom) width= (length or percent) height= length or percent border= length dir= (ltr or rtl) NOTE: The bgcolor, background, and the text attributes in the <body> tag are deprecated in the latest versions of HTML (HTML 4 and XHTML). The World Wide Web Consortium (W3C) has removed these attributes from its recommendations. Style sheets (CSS) should be used instead (to define the layout and display properties of HTML elements).
HTML … Formatting Output HTML defines a lot of elements for formatting output, like bold or italic text.. Text Formatting tags: Example 6 Tag Description <b> Defines bold text <em> Defines emphasized text <i> Defines italic text <small> Defines smaller text <strong> Defines important text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text <mark> Defines marked/highlighted text
HTML … Formatting Output Citations, Quotations, and Definition Tags: Example 7 Tag Description <abbr> Defines an abbreviation or acronym <address> Defines contact information for the author/owner of a document <bdo> Defines the text direction <blockquote> Defines a section that is quoted from another source <cite> Defines the title of a work <q> Defines a short inline quotation
HTML … Formatting Output Computer code elements Example 8 Tag Description <code> Defines programming code <kbd> Defines keyboard input <samp> Defines computer output <var> Defines a mathematical variable <pre> Defines preformatted text <tt> Defines Teletype text
HTML … Formatting Output Font tag :The <font> tag specifies the font face, font size, and color of the text. Optional attributes: • Face: Specifies the font of text. • Color: Specifies the color of text. • Size : Specifies the size of text. e8-1 >> NOTE: The <font> tag is not supported in HTML5. Use CSS instead. <font face="verdana" size="30px" color="blue">This is some text!</font>
HTML … Character Entities • Some characters like the > character, have a special meaning in HTML, and therefore cannot be used in the text. • To display a greater than sign (>) in HTML, we have to use a character entity like &gt (name) or &#62 (number) they are same; • A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;). Note that the entities are case sensitive. &entity_name; OR &#entity_number;
HTML … Character Entities • The Most Common Character Entities:
HTML … Character Entities • Some Other Commonly Used Character Entities: Example 9
HTML … Links • HTML uses a hyperlink to link to another document on the Web. The syntax of creating an anchor: <a href="url"> Link text </a> • The <a> tag is used to create a link. • The href attribute specifies the destination address. • the words between the open and close of the anchor tag will be displayed as a hyperlink. NOTE: The link text does not have to be text. It can be an HTML image or any other HTML element.
HTML … Links • The target attribute: The target attribute specifies where to open the linked document. Example 10 Like: <a href="url" target="_blank"> Link text </a> Target Value Description _blank Opens the linked document in a new window or tab _self Opens the linked document in the same frame as it was clicked (this is default) _parent Opens the linked document in the parent frame _top Opens the linked document in the full body of the window
HTML … Links Create a Bookmark: HTML bookmarks are used to allow readers to jump to specific parts of a Web page. Bookmarks are practical if your website has long pages. Example 11 Like: <h1 id="c15">Chapter 15 </h1> First, create a bookmark with the id attribute: Then, add a link to the bookmark ("ch2"), within the same page: Like: <a href="#c15">Jump to chapter 15</a>
HTML … Images • In HTML, images are defined with the <img> tag. • The <img> tag is empty, it contains attributes only, and does not have a closing tag. • The src attribute specifies the URL (web address) of the image: Some img tag attributes: • alt: Specifies an alternate text for an image, if the image cannot be displayed. • width and height: to specify the width and height of an image. • aligning image: to align the image within the text using ( top, middle or bottom) values. • border: specify the image border. • bordercolor: specify the color of the border. example-17 imgalign <img src="url" alt="some_text">
HTML … Images Using an Image as a Link To use an image as a link, simply nest the <img> tag inside the <a> tag: <a href="e5-1_bgcolor.html"> <img src="smiley.gif" alt="HTML" height="42px" width="42px" border=“5“ bordercolor=“green”> </a> Example-17
HTML … Frames With frames, you can display more than one Web page in the same browser window. Frame tags Frameset tag : • The <frameset> tag defines how to divide the window into frames​. • Each frameset defines a set of rows or columns
HTML … Frames • The values of the rows/columns indicate the amount of screen area each row/column will occupy.​ Frame tag: • <frame> tag defines what HTML document to put into each frame. • Attributes: name Optional Attributes: • Cols: Specifies the number and size of columns in a frameset its value can be percentage or pixels. • Rows: Specifies the number and size of rows in a frameset its value can be percentage or pixels. <frameset cols="25%,25%,50%"> <frame src="frame_a.html"> <frame src="frame_b.html"> <frame src="frame_c.html"> </frameset>
HTML … Frames Create a vertical frames <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.html"> <frame src="frame_b.html"> <frame src="frame_c.html"> </frameset> </html> Examples: Create a horizontal frames <html> <frameset rows="25%,50%,25%"> <frame src="frame_a.html"> <frame src="frame_b.html"> <frame src="frame_c.html" noresize='noresize' border=''> </frameset> </html> Create a mixed frames <html> <frameset rows="50%,50%"> <frame src="frame_a.html"> <frameset cols="25%,75%"> <frame src="frame_b.html"> <frame src="frame_c.html"> </frameset> </frameset> </html> Create a navigation frameset <html> <frameset cols="10%,*"> <frame src="links.html"> <frame src="frame_a.html“ name="showframe"> </frameset> </html> e12-vertical frames e13-horizontal frames e15-mixed frames e15-navigation frames Example 15-iframe
HTML … Frames NOTE: • If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <frame> tag. • Add the <noframes> tag for browsers that do not support frames. • You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags!

More Related Content

web development.pdf

  • 2. This Course Will Cover ▪ HTML (Hyper Text Markup Language) ▪ CSS (Cascading Style Sheets) ▪ JS (Java Script ) with Jquery & AJAX (Asynchronous Java script and XML) ▪ PHP ( Hyper text Preprocessor) ▪ MySQL ( Structured Query Language)
  • 3. HTML … Introduction • HTML stands for Hyper Text Markup Language. • An HTML file is a text file containing small markup tags. The markup tags tell the Web browser how to display the page. ▪ The extension of an HTML file is htm or html ▪ It is not a programming language in the traditional sense, but rather a set of instructions about how to display content. The computer application that translates this description is called a Web browser.
  • 4. HTML … Versions In 1980, physicist Tim Berners-Lee, who was a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents.
  • 5. HTML … Elements ▪ HTML documents are text files made up of HTML elements. ▪ HTML elements are defined using HTML tags. HTML Tags • HTML tags are keywords (tag names) surrounded by angle brackets: • HTML tags normally come in pairs like <b> element content </b> • First tag in a pair is the start tag, the second tag is the end tag • HTML tags are not case sensitive, <H1> means the same as <h1>. <tagname>content</tagname>
  • 6. HTML … Elements *** Note *** • If you want to follow the latest web standards, you should always use lowercase tags. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML recommendation . • Even if you write some tags without closing it, may work in most of the browsers.but don't rely on it. Future version of HTML will not allow you to skip ANY end tags. • Closing all HTML elements with an end tag is a future-proof way of writing HTML. It also makes the code easier to understand.
  • 7. HTML … Basic Structure The basic structure for all HTML documents is the same and should include the following minimum elements and tags: • The DOCTYPE declaration defines the document type to be HTML • The text between <html> and </html> describes an HTML document <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> The content of the page… </body> </html>
  • 8. HTML … Basic Structure • The text between <head> and </head> provides information about the document • The text between <title> and </title> provides a title for the document or you can use the <link> tag to make an image as an title of the document <link rel="shortcut icon" href="your_image_path_and_name.ico" /> • The text between <body> and </body> describes the visible page content. Like1
  • 9. HTML … Basic Tags The most important tags in HTML are tags that define headings, paragraphs and line breaks. Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. HTML automatically adds an extra blank line before and after a heading. example2 <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <h2>This is a Heading</h2> <h3>This is a Heading</h3> <h4>This is a Heading</h4> <h5>This is a Heading</h5> <h6>This is a Heading</h6> </body> </html>
  • 10. HTML … Basic Tags Paragraphs Paragraphs are defined with the <p> tag. HTML automatically adds an extra blank line before and after a paragraph. <p>This is a paragraph</p> <p>This is another paragraph</p> Line Breaks (<br> or <br /> ) The <br > tag is used when you want to break a line. The <br> tag forces a line break wherever you place it. The <br> tag is an empty tag. It has no end tag like </br>. example3 <p>This <br> is a para<br>graph with line breaks</p>
  • 11. HTML … Basic Tags <!--[if IE 8]> This text will be displayed only in IE 8 <![endif]--> Horizontal lines (<hr> ) It defines a horizontal rule example4 Comments in HTML The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. Conditional Comments Defines HTML tags to be executed by Internet Explorer only. <!-- This is a comment -->
  • 12. HTML … Attributes • HTML elements can have attributes which provide additional information about an element • Attributes are always specified in the start tag • Attributes come in name/value pairs like: name="value“ example5 <body dir=“ltr”> <p title="web programming"> web programming include HTML,CSS,SQL,ASP,PHP..</p> NOTE: not all tags accept attributes or all attributes
  • 13. HTML … Attributes (examples) The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image. Bgcolor: Specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name. Text : Specify the text color for the document and it use the same values of bgcolor attribute. <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"> <body text="#000000"> Example 5-1
  • 14. HTML … Attributes (examples) background: • Specifies a background-image for an HTML page. • The value of this attribute is the URL of the image you want to use. • If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window <body background="img.jpg"> <body background="http://www.example.com/clouds.gif"> Example 5-2
  • 15. HTML … Attributes Some attribute samples: align= (center, left, right) valign= (middle, top, bottom) width= (length or percent) height= length or percent border= length dir= (ltr or rtl) NOTE: The bgcolor, background, and the text attributes in the <body> tag are deprecated in the latest versions of HTML (HTML 4 and XHTML). The World Wide Web Consortium (W3C) has removed these attributes from its recommendations. Style sheets (CSS) should be used instead (to define the layout and display properties of HTML elements).
  • 16. HTML … Formatting Output HTML defines a lot of elements for formatting output, like bold or italic text.. Text Formatting tags: Example 6 Tag Description <b> Defines bold text <em> Defines emphasized text <i> Defines italic text <small> Defines smaller text <strong> Defines important text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text <mark> Defines marked/highlighted text
  • 17. HTML … Formatting Output Citations, Quotations, and Definition Tags: Example 7 Tag Description <abbr> Defines an abbreviation or acronym <address> Defines contact information for the author/owner of a document <bdo> Defines the text direction <blockquote> Defines a section that is quoted from another source <cite> Defines the title of a work <q> Defines a short inline quotation
  • 18. HTML … Formatting Output Computer code elements Example 8 Tag Description <code> Defines programming code <kbd> Defines keyboard input <samp> Defines computer output <var> Defines a mathematical variable <pre> Defines preformatted text <tt> Defines Teletype text
  • 19. HTML … Formatting Output Font tag :The <font> tag specifies the font face, font size, and color of the text. Optional attributes: • Face: Specifies the font of text. • Color: Specifies the color of text. • Size : Specifies the size of text. e8-1 >> NOTE: The <font> tag is not supported in HTML5. Use CSS instead. <font face="verdana" size="30px" color="blue">This is some text!</font>
  • 20. HTML … Character Entities • Some characters like the > character, have a special meaning in HTML, and therefore cannot be used in the text. • To display a greater than sign (>) in HTML, we have to use a character entity like &gt (name) or &#62 (number) they are same; • A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;). Note that the entities are case sensitive. &entity_name; OR &#entity_number;
  • 21. HTML … Character Entities • The Most Common Character Entities:
  • 22. HTML … Character Entities • Some Other Commonly Used Character Entities: Example 9
  • 23. HTML … Links • HTML uses a hyperlink to link to another document on the Web. The syntax of creating an anchor: <a href="url"> Link text </a> • The <a> tag is used to create a link. • The href attribute specifies the destination address. • the words between the open and close of the anchor tag will be displayed as a hyperlink. NOTE: The link text does not have to be text. It can be an HTML image or any other HTML element.
  • 24. HTML … Links • The target attribute: The target attribute specifies where to open the linked document. Example 10 Like: <a href="url" target="_blank"> Link text </a> Target Value Description _blank Opens the linked document in a new window or tab _self Opens the linked document in the same frame as it was clicked (this is default) _parent Opens the linked document in the parent frame _top Opens the linked document in the full body of the window
  • 25. HTML … Links Create a Bookmark: HTML bookmarks are used to allow readers to jump to specific parts of a Web page. Bookmarks are practical if your website has long pages. Example 11 Like: <h1 id="c15">Chapter 15 </h1> First, create a bookmark with the id attribute: Then, add a link to the bookmark ("ch2"), within the same page: Like: <a href="#c15">Jump to chapter 15</a>
  • 26. HTML … Images • In HTML, images are defined with the <img> tag. • The <img> tag is empty, it contains attributes only, and does not have a closing tag. • The src attribute specifies the URL (web address) of the image: Some img tag attributes: • alt: Specifies an alternate text for an image, if the image cannot be displayed. • width and height: to specify the width and height of an image. • aligning image: to align the image within the text using ( top, middle or bottom) values. • border: specify the image border. • bordercolor: specify the color of the border. example-17 imgalign <img src="url" alt="some_text">
  • 27. HTML … Images Using an Image as a Link To use an image as a link, simply nest the <img> tag inside the <a> tag: <a href="e5-1_bgcolor.html"> <img src="smiley.gif" alt="HTML" height="42px" width="42px" border=“5“ bordercolor=“green”> </a> Example-17
  • 28. HTML … Frames With frames, you can display more than one Web page in the same browser window. Frame tags Frameset tag : • The <frameset> tag defines how to divide the window into frames​. • Each frameset defines a set of rows or columns
  • 29. HTML … Frames • The values of the rows/columns indicate the amount of screen area each row/column will occupy.​ Frame tag: • <frame> tag defines what HTML document to put into each frame. • Attributes: name Optional Attributes: • Cols: Specifies the number and size of columns in a frameset its value can be percentage or pixels. • Rows: Specifies the number and size of rows in a frameset its value can be percentage or pixels. <frameset cols="25%,25%,50%"> <frame src="frame_a.html"> <frame src="frame_b.html"> <frame src="frame_c.html"> </frameset>
  • 30. HTML … Frames Create a vertical frames <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.html"> <frame src="frame_b.html"> <frame src="frame_c.html"> </frameset> </html> Examples: Create a horizontal frames <html> <frameset rows="25%,50%,25%"> <frame src="frame_a.html"> <frame src="frame_b.html"> <frame src="frame_c.html" noresize='noresize' border=''> </frameset> </html> Create a mixed frames <html> <frameset rows="50%,50%"> <frame src="frame_a.html"> <frameset cols="25%,75%"> <frame src="frame_b.html"> <frame src="frame_c.html"> </frameset> </frameset> </html> Create a navigation frameset <html> <frameset cols="10%,*"> <frame src="links.html"> <frame src="frame_a.html“ name="showframe"> </frameset> </html> e12-vertical frames e13-horizontal frames e15-mixed frames e15-navigation frames Example 15-iframe
  • 31. HTML … Frames NOTE: • If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <frame> tag. • Add the <noframes> tag for browsers that do not support frames. • You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags!