How to Create the Basic HTML Structure References
How to Create the Basic HTML Structure References: Dynamic HTML 4 th Edition by Patrick Carey and course notes Mircrosoft Power. Point 2003
Text Pad Editor! Mircrosoft Power. Point 2003 • Copyright 2009 by Melanie Lalonde • The very first thing that you need to do before you can begin is download a text pad editor. It can be found at http: //www. textpad. com/ 2
What is HTML? Mircrosoft Power. Point 2003 • Copyright 2009 by Melanie Lalonde • Html Stand for Hypertext Markup Language • It is used to mark the elements of a document to create a web page • You will be able to understand what that definition means by the end of this presentation. 3
Tags • The most important tags are the <html>, <head>, <body>. • Other types or tags are <p> (paragraph), <ul> (unordered list), and <ol> (ordered list). This is just to name a few. • We will only be dealing with the most important tags as they are found in every document Mircrosoft Power. Point 2003 • Copyright 2009 by Melanie Lalonde • Tags are the core building blocks of HTML and marks the presence of an element. • An Element is a distinct object in a web document, like a paragraph, a heading, or the page’s title. • Tags are ALWAYS found between these sort of brackets < >. This animation is called a Title arc where it arcs the title in first and brings in the bullets after with custom animation 4
HTML Tags – ie. <html> lets the text pad editor know to read the code as html Mircrosoft Power. Point 2003 5 • Copyright 2009 by Melanie Lalonde • They ALWAYS start off an html document • It lets the text editor know how to read the code
Head Tags – ie. This is where you would insert the key terms to explain what your document is about. Mircrosoft Power. Point 2003 6 • Copyright 2009 by Melanie Lalonde • They are one of the two main sections of a web document that contains information about the document so that users can search and find it on the web using a search engine.
Body Tags Mircrosoft Power. Point 2003 • Copyright 2009 by Melanie Lalonde • This is the part of the document where everything that would like to have displayed is written ie. <body> The watermelon tasted great!</body> 7
Just for your information – Elements are distinct objects in a web document, like a paragraph, a heading, or the page’s title – THE MOST IMPORTANT THING TO REMEMBER IS IF YOU OPEN A TAG YOU MUST CLOSE IT!! • EG. YOU OPEN A HEAD TAG <HEAD> YOU MUST CLOSE IT LIKE SO </HEAD> OTHERWISE YOU WILL GET ERRORS! Mircrosoft Power. Point 2003 8 • Copyright 2009 by Melanie Lalonde • These main tags are known as elements
• Copyright 2009 by Melanie Lalonde • The next steps are to actually write the document! • Next is an example of what the basic structure is with comments explaining what goes where. We’re Almost Done!!! YAY Created by Melanie Lalonde Mircrosoft Power. Point 2003 9
Opening Head tag and its closing tag This was made taking a screen shot and using drawing objects with Microsoft office all done by me Melanie Lalonde • Copyright 2009 by Melanie Lalonde Opening Html tag and its closing tag Opening Body Tag and its closing tag • This is how it should look like after you have saved it in your text editor! (minus the brackets Mircrosoft Power. Point 2003 connecting the tags and their comments) 10
What you should know! Mircrosoft Power. Point 2003 • Copyright 2009 by Melanie Lalonde • What a text editor is • What an element is • What the most important tags are and basic understanding on how they are used • What a basic document looks like in the text pad editor 11
- Slides: 11