1 / 20

Review: HTML Intermediate Tutorial

This intermediate HTML tutorial delves into the significance of HTML tags in structuring web content. It clarifies the roles of span and div elements in grouping HTML content and highlights their dependency on CSS for styling. Additionally, it explores meta tags, which enhance SEO by providing search engines with essential page information. You'll learn how to utilize these tags effectively along with table enhancements like rowspan and colspan, and the concept of definition lists for better organization of terms and their descriptions.

fitzgerald-oconnor
Télécharger la présentation

Review: HTML Intermediate Tutorial

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Review: HTML Intermediate Tutorial

  2. Remember, HTML is all about the meaningof yourcontent • 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

  3. 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

  4. 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

  5. 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 Span & Div

  6. 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

  7. Meta Tags

  8. Meta tags can be used as many times as you like • The primary attributes associated with HTML5 meta tags are content, nameand 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

  9. Meta Tags

  10. Meta Tags

  11. This is pretty close to what you learned in the Beginner tutorial More Tables

  12. You will notice though, that the <td> tags have been replaced with <th> tags More Tables

  13. <td> is a standard data cell • <th> is a header cell, which comes with header formatting More Tables

  14. “colspan” and “rowspan” are also new additions to the <td> tags More Tables

  15. These attributes merge cells in rows and columns More Tables

  16. <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

  17. Definition Lists

  18. 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

  19. 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

  20. 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> Styling

More Related