1 / 20

<Tags></Tags>

<Tags></Tags>. Purpose. Tags are the key to marking up content on your HTML page. It’s the tags that mark up sections of the page and are defined (aesthetically) on the CSS page MOST tags begin with an opening tag <tag name> and end with a closing tag </tag name>

gamada
Download Presentation

<Tags></Tags>

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. <Tags></Tags>

  2. Purpose • Tags are the key to marking up content on your HTML page. • It’s the tags that mark up sections of the page and are defined (aesthetically) on the CSS page • MOST tags begin with an opening tag <tag name> and end with a closing tag </tag name> • Everything in-between the opening and close takes on the properties assigned to that tag • Some properties come automatically with the tag, but CSS can be used to change these properties or add additional ones • You cannot make up tags. You must use valid HTML tags or nothing will happen • And your page will not validate with the W3C

  3. Margins and Padding • To understand some of these tag descriptions, we need to jump ahead a little bit and discuss CSS margin and padding. • Margin and padding are two different ways to create white space and move elements around a page. • It’s important to understand them now because some tags come with automatic margins and/or padding that you will sometimes want to turn off.

  4. Margin • Margin definitions create space that pushes off and outwards of an element. Page Heading Photo Navigation Bar In the CSS, there is a bottom margin of a few pixels applied to the Page Heading Photo div. If a margin was not set, there would be no space in-between this sections. They would stack directly under each other.

  5. Padding • Padding definitions create space that push inward from the edge of an element. Welcome to your English 3340 course website. You will find your course syllabus in the bulleted list of links to the left. We will be using this site primarily for two purposes. First, it will serve as a storehouse for all of your handouts and sometimes additional readings (as listed on the syllabus). I will also post your blog prompts and questions There is a padding value of 10 pixels or so defined to this column container. If the padding wasn’t defined, the text would start at the very edge of the box. That never looks good.

  6. <html> • First tag on your page • Defines that this is an HTML document • Also used to define language and ID for the site (for Search Engine purposes) • Closing tag </html> will be the final line of your code on any page Special Considerations • None. Will be included on your cut-and-paste sheet

  7. <head> • First section of any page- content of this section does not show on the page • Head section used to define: • Character set of page • Title of page • Link to CSS page Special Considerations: • None, will be included in your cut-and-paste sheet, though title and name of css page will need to be filled in

  8. <title> • Child tag of the parent <head> • Will define the title of the page as it appears in the tab of a web-browser • Should be filled with key-words that help your page be found with search engines Example: <title>Mark D Pepper @ Rhetoric and Composition</title> Special Considerations: None

  9. <body> • Everything that is visible on the screen is placed between the body tag opening and closing • Therefore, the closing of the </body> tag is usually far down the page

  10. <ul> and <li> • <ul> creates an “unordered list” (bullet list) • <li> is a “list item” inside this list • <li> tags are children to the parent <ul> Example: <ul> <li>coffee</li> <li>sugar</li> <li>milk</li> <li>tea</li> </ul> • coffee • sugar • milk • tea

  11. <ul> and <li> Special Considerations: • Not only used to make visible bullet lists. Most navigation is built with <ul> and <li> but the bullets have been made invisible and sometimes turned horizontal • <ul> tag comes with automatic margins and left padding (exact amount varies by browser). • The left padding indents the list as bullet list traditionally are • Use CSS if this margin and padding does not work with your design.

  12. <a> • Short for “anchor,” the <a> defines a hyperlink • The contents are a bit more complex that tags we’ve looked at so far since various properties need to be defined within it Basic Example: <a href=“http://markdpepper.com”>Home</a> • The href stands for “hyperlink reference: this is where you place the URL of the link • The text in-between the tags is the text that will turn into the clickable link

  13. <a> • Additional properties can be defined besides the href before you close the opening tag Example: <a href=“http://markdpepper.com” target=“_blank”>Home</a> • In this case, the target is being used to open the link in a new page Special Considerations: • Links automatically are set to blue underlined text. This can be altered with CSS in many ways • Watch punctuation when creating links.

  14. <p> • Stands for “paragraph” • Used to create paragraphs on your pages Special Considerations: • Automatically places space above and below the enclosed text. • This space can be altered or removed but usually you have no reason to do so.

  15. <br/> • Stands for “line break” • Is a “self-closing tag.” In other words, you never need to go: <br> </br>. The <br /> is sufficient • Used when you want text to appear directly under a line without the space that a <p> would create <p>This is some text.<br /> That br tag allows this to be right under the previous line.</ br> Now I can close the paragraph.</p> This is some text. That br tag allows this to be right under the previous line. Now I can close the paragraph.

  16. <h1>,<h2>,<h3>,<h4>, through 9 • Heading tags • Used to define titles, content sections, and other page divisions • #1 should be the largest, boldest text on the page and 2, 3, 4 should increasingly get smaller Special Considerations: • Only one use of <h1> per page (other h-tags can repeat) • Automatically comes with top and bottom margin. Can be turned off with CSS

  17. <img> • Links to an image • Self-closing tag. You never need a </img> • Like the <a> tag, has multiple properties defined inside of it Example: <imgsrc=“http://markdpepper.com/pic.jpg” alt=“Insert short piece of text that describes the image” /> • The alt is an important addition. If the picture fails to load, this text will display. Alt text is also used by screen readers for visually impaired web surfers.

  18. <b> and <i> • <b> for bolding text/ <i> for italics • Technically these create aesthetic effects, which is usually the job of the CSS. However, for short pieces of text inside a paragraph, this is usually more efficient • And still validates with W3C standards <b>Bold this text.</b> <i>Italicize this text.</i> Bold this text. Italicize this text.

  19. <div> • Creates a page division. • All sites are essentially built with div tags that define page sections: headers, footers, columns, etc. • Each <div> requires a name, also called an ID (identification) • These can technically be anything, but some names have become common use Example: <div id=“leftcolumn”></div> • Note the closing of a div does not repeat the id name • The div becomes a parent to a multitude of tags that will be inside of it.

  20. <!--> • A strange looking tag that sets off a comment intended only to be read in the code • Will not display on screen • Closes with a – • Very useful to keep track of your closing div tags Example: <!-- This is a comment inside the code-->

More Related