HTML What is HTML HTML stands for Hyper

  • Slides: 18
Download presentation
HTML What is HTML? HTML stands for Hyper Text Markup Language HTML describes the

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> <head> <title>computer science</title> </head> <body> <b> hellow all students </b>

First Example <!DOCTYPE html> <head> <title>computer science</title> </head> <body> <b> hellow all students </b> </body> </html>

Second Example • <!DOCTYPE html> <head> <title>computer science</title> </head> <body> • <h 1> hellow

Second Example • <!DOCTYPE html> <head> <title>computer science</title> </head> <body> • <h 1> hellow all students </h 1> </body> </html>

Some of tags • The <!DOCTYPE html> declaration defines this document to be HTML

Some of tags • The <!DOCTYPE html> declaration defines this document to be HTML 5 • 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 <h 1> element defines a large heading • The <p> element defines a paragraph • The <b> element make text bold

Some of tags • The (break line)tag used to break line(go to new line)

Some of tags • The (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)

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

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"> <h 1 align="center">chewan </h 1> <p

example • • • <html> <title>chewan</title> <body bgcolor="pink"> <h 1 align="center">chewan </h 1> <p align="right">jalal </p> <hr> <p align="left">muhamad </p> <pre> email: [email protected] com phone: 333 </pre> • </body> • </html>

 hyperlink • hyperlink used to link to another page. • We create hyperlink

hyperlink • hyperlink used to link to another page. • We create hyperlink by <a href=“”> tags 8/11/2016

Example of hyperlink • <html> • <title>create link </title> • <body> • <a href="test.

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

Example 2 of hyperlink • If we want open the page in new tab

Example 2 of hyperlink • 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 • To bring image using <img> tag • Write it

Make image as link • 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=“ 100 px" height="100 px"> </a> • </body> • </html> • • •

Local link • Link to a location in the same page • 1 -create

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

Example of local link • • • • <html> <body> <a href="#a">go to computer science </a> <p>. . </p><p>. . </p><p>. . . </p> <p id="a"> computer science </p> </body> </html>

Exercise

Exercise

Frame • Frame: using to display more than one page in same page. •

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)

Example • • You must already create three page(a. html, b. html, c. html) <html> <frameset cols="25%, 50%, 25%"> <frame src="a. html"> <frame src="b. html"> <frame src="c. html"> • </frameset> • </html>