HTML Basics Web HTML Hypertext Markup Language Uses

HTML Basics Web

HTML • Hypertext Markup Language • Uses tags to modify text files for display on the World Wide Web. • Uses suffixes (. htm) or (. html) • Standards are set by the World Wide Web Consortium

Structure of an HTML page • Pages are created using a series of tags that surround the page’s content. • Tags are placed in “less than” and “more than” symbols, with the closing tag also including a “forward slash. ” <tagname>Content goes here. </tagname>

Structure of an HTML page (cont. ) • The basic structure of a Web page (note that tags sometimes appear inside other tags): <html> <head><title></head> <body></body> </html>

Tags • Most HTML tags can have attributes, and those attributes can have their own values: <html lang=en> In this example, specifies this is an tagthe tag attribute value HTML document and that the content is in the English language.

Common tags • <h 1> - <h 6> — define HTML headings • — create a line break • — create a paragraph • — make text bold • — make text italic • <a> — make a hyperlink • <img> — insert an image

Your first Web page <!doctype html> <html lang=en> <head> <title>My first Web page</title> </head> <body> Hello, world! </body> </html>

Practice Using an HTML editor or the “Try it yourself” feature on http: //www. w 3 schools. com/html/ try to re-create this HTML page:

Practice

Practice <!doctype html> <html lang=en> <head> <title>Learning HTML</title> </head> <body> <h 1>Hello, world!</h 1> I'm beginning to learn HTML. </body> </html>

Adding images <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=“images/paperclip. jpg”> In this example, the value shows the “path” of

Adding images <img src=“images/paperclip. jpg”> In this example, the value shows the “path” of the image “paperclip. jpg” in the folder “images”

Adding links <a href=“more. html”>This is a link for more information. </a> This is called a “relative” link, because it shows where the link is in relation to the document being viewed. <a href=“http: //www. jea. org”>This is a link to JEA. </a> This is called a “direct” link, because it shows the full path to the link. Note the “http” in the direct link. <a href=“www. jea. org”>This is a link to JEA. </a> This link would not work. Because it is missing “http, ” the browser would think this is a “relative” link instead of a direct link.