Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Lesson2
Ähnlich wie Lesson2 (20)
Mehr von hstryk
Mehr von hstryk (15)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Lesson2
- 1. Hamburger Markup Text Language LECTURE 2
- 2. <div> </div> <body> </body> <li> </li> <html> </html> <script> </script> <head> </head> Open Tag Close Tag Content Hamburger Text Markup Language - http://www.dontfeartheinternet.com/html/html
- 3. Start tags consist of the following parts, in exactly the following order: 1. A "<" character. 2. The element’s tag name. 3. Optionally, one or more attributes, each of which must be preceded by one or more space characters. 4. Optionally, one or more space characters. 5. Optionally, a "/" character, which may be present only if the element is a void element. 6. A ">" character. <p> <p class=“BoringTxt”> Info via: http://www.w3.org/TR/html-markup/syntax.html#syntax-elements
- 4. End tags consist of the following parts, in exactly the following order: 1. A "<" character. 2. A "/" character 3. The element’s tag name. 4. Optionally, one or more space characters. 5. A ">" character. </p>
- 5. Attributes class Specifies one or more classnames for an element (refers to a class in a style sheet) id Specifies a unique id for an element style Specifies an inline CSS style for an element title Specifies extra information about an element (displayed as a tool tip) Example: <p class=“classname”> <p id=“idname”> <p style=“font-size:20px;”>
- 6. <area > <base> <br> <col> <command> <embed> <hr> <img> <input> <link> <meta> <param> <source> Exception to the rule: VOID ELEMENTS Void Elements are tags that don't require a closing tag to be valid. These elements are usually elements that either stand alone on the page, or where the end of their contents is obvious from the context of the page itself. <div> Lorem ipsum dolor sit amet. <br/> <img src=“example.jpg”/> </div> Void Elements
- 7. <head> Before the <body> element you will often see a <head> element. This contains information about the page such as its title, keywords that may be useful to search engines, and other data that is not considered document content. <title> Every HTML document must have a <title> element in the HEAD section. You should use the <title> element to identify the contents of a document. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as "Introduction", which doesn't provide much contextual background, authors should supply a title such as "Introduction to Medieval Bee-Keeping" instead. <body> The body of a document contains the document's content. The content may be presented by a user agent in a variety of ways. For example, for visual browsers, you can think of the body as a canvas where the content appears: text, images, colors, graphics, etc. Everything inside this element is shown inside the main browser window.
- 9. a - “anchor” used for hyperlinks blockquote - for large quotes body - visible part of your site br - line break cite - a citation div - content divider DOCTYPE - document type em - text w/ emphasis h1 - most important header h2 - 2nd most important h3-h6 - 3-6th most important head - invisible part of your site html - “what follows is HTML” img - image li - list item link - to attach CSS stylesheets ol - ordered list p - paragraph span - inline content divider strong - strong text emphasis style - for inline CSS styling title - title of the page ul - unordered list Common HTML Tags List & Definitions via: http://www.dontfeartheinternet.com/html/html
- 10. Required Attributes src is used to specify the location of the image file. alt is used to specify the alternative text of the image, which should be a short description. Optional Attributes height can be used to define the height of the image (in pixels). width can be used to define the width of the image (in pixels). (Height & width can also be defined using CSS. Example IMG Tag Info via: http://www.htmldog.com/reference/htmltags/img/ <img src="http://www.website.com/images/logo.gif" alt=“Logo” height=“50px” width=“50px” />
- 12. Result:
- 13. Tutorial: Your first web page!