remember, html is all about the meaning of your content most html tags have built-in formatting that...
TRANSCRIPT
![Page 1: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/1.jpg)
Review: HTML Intermediate Tutorial
![Page 2: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/2.jpg)
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.
![Page 3: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/3.jpg)
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.
![Page 4: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/4.jpg)
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.
![Page 5: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/5.jpg)
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
![Page 6: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/6.jpg)
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
![Page 7: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/7.jpg)
Meta Tags
![Page 8: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/8.jpg)
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
![Page 9: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/9.jpg)
Meta Tags
![Page 10: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/10.jpg)
Meta Tags
![Page 11: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/11.jpg)
More Tables• This is pretty close to what you learned in the Beginner tutorial
![Page 12: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/12.jpg)
More Tables• You will notice though, that the <td> tags have been replaced with <th> tags
![Page 13: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/13.jpg)
More Tables• <td> is a standard data cell• <th> is a header cell, which comes with
header formatting
![Page 14: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/14.jpg)
More Tables• “colspan” and “rowspan” are also new additions to the <td> tags
![Page 15: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/15.jpg)
More Tables• These attributes merge cells in rows and columns
![Page 16: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/16.jpg)
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
![Page 17: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/17.jpg)
Definition Lists
![Page 18: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/18.jpg)
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.
![Page 19: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/19.jpg)
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.
![Page 20: 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](https://reader035.vdocuments.us/reader035/viewer/2022062314/56649db55503460f94aa608e/html5/thumbnails/20.jpg)
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>