HTML What is HTML? HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup HTML elements are the building blocks of HTML pages HTML elements are represented by tags HTML tags label pieces of content such as "heading", "paragraph", "table", and so on Browsers do not display the HTML tags, but use them to render the content of the page
First Example <!DOCTYPE html> <html> <head> <title>computer science</title> </head> <body> <b> hellow all students </b> </body> </html>
Second Example <!DOCTYPE html> <html> <head> <title>computer science</title> </head> <body> <h1> hellow all students </h1> </body> </html>
Some of tags The <!DOCTYPE html> declaration defines this document to be HTML5 The <html> element is the root element of an HTML page The <head> element contains meta information about the document The <title> element specifies a title for the document The <body> element contains the visible page content The <h1> element defines a large heading The <p> element defines a paragraph The <b> element make text bold
Some of tags The <br> (break line)tag used to break line(go to new line) <!-- comment --> The <hr> horizontal rule: used to make horizontal line
Tag with attributes Bgcolor to set background color Align (left,right,center) to move the text to left or right or center
Some of tags <strong> make text bold <pre> preformatted text: show text with both spaces and line breaks. <address> using to write address in html
example <html> <title>chewan</title> <body bgcolor="pink"> <h1 align="center">chewan </h1> <p align="right">jalal </p> <hr> <p align="left">muhamad </p> <pre> email:chewanjalal@yahoo.com phone:333 </pre> </body> </html>
hyperlink 8/11/2016 hyperlink used to link to another page. We create hyperlink by <a href=“”> tags
Example of hyperlink <html> <title>create link </title> <body> <a href="test.html"> click me </a> </body> </html> test.html is the page you want to visit it
Example2 of hyperlink <html> If we want open the page in new tab ,using target=“_blank” <html> <title>create table </title> <body> <a href="test.html" target="_blank">click me </a> </body> </html>
Make image as link <html> To bring image using <img> tag Write it instead text between <a> tag <html> <title>create table </title> <body> <a href="test.html" target="_blank"> <img src="a.jpg" width=“100px" height="100px"> </a> </body> </html>
Local link Link to a location in the same page 1-create ID to the Tag that you want to visit it. 2-create link and write name of ID with # character .
Example of local link <html> <body> <a href="#a">go to computer science </a> <br><br><br><br><br><br> <br><br> <p>.....</p><p>.....</p><p>.....</p> <p>.....</p><p>...</p><p>..</p> <p id="a"> computer science </p> </body> </html>
Exercise
Frame Frame:using to display more than one page in same page. <frameset>: define how to divide the window Into frames and each frameset have set of rows or columns . <frame>: define each frame to show one page
Example You must already create three page(a.html, b.html,c.html) <frameset cols="25%,50%,25%"> <frame src="a.html"> <frame src="b.html"> <frame src="c.html"> </frameset> </html>