Remember, HTML is all about the meaning of your content Most HTML tags have built-in formatting that...
20
Review: HTML Intermediate Tutorial
-
Upload
morgan-hector-campbell -
Category
Documents
-
view
220 -
download
0
Transcript of Remember, HTML is all about the meaning of your content Most HTML tags have built-in formatting that...
Review: HTML Intermediate Tutorial
Span & Div
• Remember, HTML is all about the meaning of your content
• Most HTML tags have built-in formatting that apply “meaning” to them and format their content in a specific way (p makes a paragraph, h1 makes a heading…)
• Span and Div, however just facilitate more precise grouping of elements for more intricate formatting.
Span & Div
• They are completely dependent on the formatting that you associate with them through CSS.
• With this first introduction, I just want you to understand these two tags as additional ways to group elements in HTML so that you can stylize them all together with CSS.
Span & Div
• The difference between span and div is that a span element is in-line and usually used for a small chunk of in-line HTML
• A div (division) element is a block-line, which is basically equivalent to having a line-break before and after it. It is used to group larger chunks of code together.
Span & Div
• Div and especially span should not be used that often
• There is usually a cleaner and easier way to do whatever you’re trying to do with div and span
Meta Tags
• Meta tags are not visible on a web page
• Their purpose is to allow search engines to catalog information about the web page
• This facilitates better standing for a webpage in search engine results
Meta Tags
Meta Tags
• Meta tags can be used as many times as you like
• The primary attributes associated with HTML5 meta tags are content, name and charset
• The values related to the name attribute can be “description” “author” or “keywords”
• The values related to the content attribute can be a few things, but “content-type” is best.
• Don’t worry about http-equiv, that is from HTML 4.01
Meta Tags
Meta Tags
More Tables• This is pretty close to what you learned in the Beginner tutorial
More Tables• You will notice though, that the <td> tags have been replaced with <th> tags
More Tables• <td> is a standard data cell• <th> is a header cell, which comes with
header formatting
More Tables• “colspan” and “rowspan” are also new additions to the <td> tags
More Tables• These attributes merge cells in rows and columns
Definition Lists
• <dl> is a specific kind of list, similar to what you’ve already seen in the beginner tutorial with <ul> or <ol>
• The list items in this definition list are labeled first with <dt> (rather than <li>)
• This <dt> means definition term, and you can have as many of these as you like
• The definition term is followed by <dd> which means definition means definition description. You can have a number of these following <dt> for multiple definitions
Definition Lists
Styling
• Styling changes the look of content.• Styling can be inline, internal or external• Inline - style is an attribute defining a value within a tag:• <p style=”font-size:20px; color: green”>
• Internal - style is hidden in the document head as a tag containing CSS selectors, properties and values: • <style> p {font-size:20px; color:green}</style>
• External - is just like internal, but separated out into a linked CSS file. More on that next class.
Styling
Inline - style is an attribute defining a value within a tag
Internal - style is hidden in the document head as a tag containing CSS selectors, properties and values.
Styling
• Common styling includes:• font-family (caps-sensitive), font-size, color, background-
color, text-align, strong, em
• Inline styling syntax:• <tag style=“value:123; other:value”>
• Internal styling syntax:• <head> <style>
selector {property:value; another-property:value}
</style>
