Introduction to HTML5-Part 1

HTML HTML is an application of the Standard Generalized Markup Language Hypertext Markup Language The language used to create web documents All page elements are identified by special tags The tags give the browser instructions on how to display the content the tags themselves don’t displa...

HTML HTML is an application of the Standard Generalized Markup Language Hypertext Markup Language The language used to create web documents All page elements are identified by special tags The tags give the browser instructions on how to display the content the tags themselves don’t display 1 HTML5 HTML5 is the new standard for HTML. The previous version of HTML, HTML 4.01, came in 1999. The web has changed a lot since then. HTML5 is in progress. However, the major browsers support many of the new HTML5 elements. All HTML examples in this course are compatible with HTML5. 2 HTML Element An HTML element starts with a start tag An HTML element ends with an end tag The element content is between the start and the end tag Most HTML elements can be nested(meaning of it) (elements can contain elements). 3 HTML Example Title of page This is my first page. How many HTML elements are in this example? I think 6 (make sure of that) 4  The declaration must be the very first thing in your HTML5 document, before the tag. The declaration is not an HTML5 tag; it is an instruction to the web browser about what version of HTML the page is written in. Different HTML version have different 5  Example HTML5 Web Page Page Title Goes Here... body text and more HTML5 tags go here... 6 Head & Body Sections Head Section Contains information that describes the Web page document …head section info goes here Body Section Contains text and elements that display in the Web page document …body section info goes here 7 Title Element Meta Element 8 HTML page structure html head body title p b i ….. 9 HTML page structure Defines the text file as being in HTML format. This is found on the beginning and end of each web page. The heading area of a the page. Defines the title displayed at the title bar of the browser window. Found after the tag and is used to define the area of the file which formats the way the web page is seen. 10 Heading Headings are defined with the to tags. defines the largest heading. defines the smallest heading. Search engines use your headings. 11 Paragraph Paragraphs are defined with the tag. HTML automatically adds an extra blank line before and after a Heading and paragraph. (remember) 12 Heading and Paragraph Example This is a heading 1 This is a heading 2 This is a heading 3 This is a heading 4 This is a heading 5 This is a heading 6 this is default paragraph text 13 HTML Formatting Tags This text is bold This text is strong This text is italic This text is emphasized This is computer output This is subscript and superscript 14 Empty HTML Elements HTML elements with no content. is an empty element without a closing tag (the tag defines a line break). Sometimes called Stand-alone element. You can close the empty element in the opening tag like this:. 15 Line Break The tag is used when you want to end a line, but don't want to start a new paragraph. The tag defines a horizontal rule. Example This is a paragraph with line break Can you change the output by adding extra spaces or extra lines in your HTML code? 16  Practice Launch Notepad or another text editor and type the 1st HTML example. Save the file as test.html. Launch a browser such as Internet Explorer or Firefox to test your page. Try the Heading and Paragraph Example. Use text formatting tags. Add spaces and empty line in the code and check your out put, add. Add background color and image to the body tag. Insert, image and link to your college webpage. Add your name and student-id as comment title. 17