Todays Topic Language of web page HTML Hypertext

Today’s Topic Language of web page - HTML (Hypertext Markup Language)

Hypertext & Hyperlink n n Books written English Web page written HTML. Hyper. Text Markup Language Web pages are text files. n The key to hypertext is the use of hyperlinks, which allow you to jump from one topic to another. n

What is HTML n HTML describes the content and format of web pages using tags. Ex. Title Tag: <title>A title </title> n It’s the job of the web browser to interpret tags and display the content accordingly.

HTML Syntax An HTML file contains both formatting tags and content n Document content is what we see on the webpage. n Tags are the HTML codes that control the appearance of the document content. n

HTML Syntax n HTML syntax: Closing tag two-sided tag: <tag attributes>document content</tag> Starting tag Properties of the tag. Optional! Actual content appears in webpage. It could be empty Examples: CGS 2100 <body bgcolor = “yellow”> UCF </body>

HTML Syntax n HTML syntax: one-sided tag: <tag /> e. g. Breaking line tag: Horizontal line tag: <hr/>

Structure of the web page n Starting with the tag <html>. . . </html> Everything about the web page should be enclosed here <html>. . . . </html>

Structure of the web page n Inside the <html></html> tag ¨ Each web page has a head part described in <head></head> tag: The title of the web page should be put here <html> <head> <title> CGS 2100 </title> </head> </html>

Structure of the web page n Inside the <html></html> tag ¨ Each web page has a body part described in <body></body> tag: <html> <head> <title> CGS 2100 </title> </head> The content of the whole web page should be put here <body> This is a sample HTML file. </body> </html>

Title Body

Create a basic HTML file n n Open your text editor (notepad). Type the following lines of code into the document: <html> <head> <title> CGS 2100 lab section</title> </head> <body> This is a sample HTML file. </body> </html>

Create a basic HTML file (cont) n Save the file as sample. htm

sample. html

Introduction to some common tags n Paragraph n List tag n Hyperlink tags

Paragraph tags . . . n n <html> <head> <title> CGS 2100 </title> </head> n <body> Here is the first paragraph. Here is the second paragraph. </body> n </html> n n n

result First paragraph Space between paragraphs Second paragraph

List tags Ordered list: used to display information in a numeric order. The syntax for creating an ordered list is: <ol > <li>item 1 </li> <li>item 2 </li> … </ol> n Result: e. g. <ol > <li> Name: Your name </li> <li> Section: ### </li> <li> Instructor: Yuping </li> </ol>

List tags Unordered list: list items are not listed in a particular order. The syntax is: <ul > e. g. <li>item 1 </li> <li>item 2 </li> … </ul> n Result <ul> <li> Name: Your name </li> <li> Section: ### </li> <li> Instructor: Yuping </li> </ul>

Hyperlink Link to another location or file n Syntax: n <a href= “http: //www. ucf. edu”> Link to UCF </a> Content displayed on the page Starting Tag Result: Attribute of the tag: the address of the hyperlink Ending tag

Link n Link to web site ¨ <a href= “http: //www. ucf. edu”> Link to UCF </a> n Link to document <a href=“http: //www. eecs. ucf. edu/images/building. jpg”>Link</a> n Email link <a href= “mailto: name@domain. com”> Link to email </a>

Include a Picture <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=“FILENAME” /> n <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=“FILENAME” alt=“text” /> n E. g.

Include a Picture <img src=“FILENAME” /> n <img src=“FILENAME” alt=“text” /> n E. g. n <img src=“logo. gif” alt=“Google logo” /> n <img src=“logo. gif” /> n

Your Reference Book n Use your HTML book “HTML and XHTML” as a reference guide.

Reminder n Assignment 2 and Semester Project Deliverable 1 are due by 11: 59 pm on February 4 th.