lesson2
TRANSCRIPT
Hamburger Markup Text Language
LECTURE 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
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
End tags consist of the following parts, in exactly the following order:1. A "<" character.2. A "/" character3. The element’s tag name.4. Optionally, one or more space characters.5. A ">" character.
</p>
Attributesclass 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;”>
<area ><base><br><col><command><embed><hr><img><input><link><meta><param><source>
Exception to the rule: VOID ELEMENTSVoid 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
<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.
a - “anchor” used for hyperlinksblockquote - for large quotesbody - visible part of your sitebr - line breakcite - a citationdiv - content dividerDOCTYPE - document typeem - text w/ emphasish1 - most important headerh2 - 2nd most importanth3-h6 - 3-6th most important
head - invisible part of your sitehtml - “what follows is HTML”img - imageli - list itemlink - to attach CSS stylesheetsol - ordered listp - paragraphspan - inline content dividerstrong - strong text emphasisstyle - for inline CSS stylingtitle - title of the pageul - unordered list
Common HTML Tags
List & Definitions via:http://www.dontfeartheinternet.com/html/html
Required Attributessrc 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 Attributesheight 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” />
Result:
Tutorial: Your first web page!