Embed Size (px)
Citation preview
IDs versus Classes
Naming Your Tags for Maximum Functionality
Common Quiz Problems- Change Header Info<!DOCTYPE html><html lang="en" id="titleofsitewithnowhitespace"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Title for Browser Tab</title><meta name="description" content="155 Character or less description of site, often displayed in search results" /><meta name="author" content="Mark Pepper" /> </head> <body>
Common Quiz Problems- Not properly closing img tag
<img src=“groot.jpg” alt=“groot from guardians of the galazy” />
/ is needed at the endThere needs to be a single space between the “ and the /
Common Quiz Problems- unneeded <p></p> or <br /> to make space that is already there
<h1> Basic Html Page</h1><br /><p>blah blah blah</p>
Remember, block level elements (like <p>, <h1>, <ul>, come with auto margin above and below– all the space you need
Common Quiz Problems- unneeded <p></p> or <br /> to make space that is already theretortor posuere.</p>
<a href="http://markdpepper.com" target="_blank">Course Site</a>
<address>
<p>Email me <a href="mailto:[email protected]">here</a></p>
</address>
Links are inline (no space above and below) but the </p> above the link pushes it down
<address> has no space; therefore, the <p> is needed around the email address to provide white space between the course link and the email link
Usability Notes Alt tags should be as specific as possible
<img src=“groot.jpg” alt=“groot” /> Not so good
<img src=“groot.jpg” alt=“portrait of the character Groot from the film Guardians of the Galaxy” /> Better. Think of what the person needs to
read/hear if pic doesn’t load or if they are visually impaired
Usability Notes <h1> Heading tags provide visual hierarchy to page The most important heading tag on your page Google recommends only one use of the H1 per page H1 should be largest, boldest, most emphasized
heading on page Should contain key words for SEO (search engine
optimization) Though there is some debate as to how important this is
Should not be wrapped in an image <h1><img src=“header.jpg” alt=“banner header for
my site” /></h1>
Those Tags Again Tags do a pretty good job of allowing us to
mark up text that will then provide us the chance to style it with CSS.
However IDs and Classes allow us even more possibilities for layout and design.
Some designers think of IDs and Classes as HOOKS. They are ways of sinking hooks into our tags that
allow CSS to get a hold of them more precisely.
An Element Can Only Behave One Way . . . Unless we use IDs and Classes!
An <h1> will behave a certain way with no CSS styling (browser default)
We can go to the CSS and make the H1s be a different font, size, bolding, etc.
But we’re left with the problem that ALL h1s will then do that and sometimes we want one (or some) to be H1s but behave slightly differently
An Element Can Only Behave One Way And it’s not just H1s– ANY element can
technically have an ID or Class applied to it
One type of Link
Another type of Link
Again, without IDs and Classes, links could only look one way.
IDs Short for identifier.
An ID is a unique identifier for an element They are most often used to mark page divisions
(<div>)
Examples: <div id=“container”>Content goes here</div> <div id=“ banner”></div> <div id=“content”></div> <div id=“sidebar”></div> <div id=“footer”></div>
They’re Attributes and Written the Same Way IDs are written into the HTML with the tag/element
name, an equal sign, and the ID name in quotation marks
<p id=“fancyquote”> One paragraph that might be stylized differently from the
rest of the paragraphs on the page.
<ul id=“navigation”> An unordered list that will be turned into a navigation bar
with CSS NOTE: BOTH ID AND CLASS NAMES CAN BE MADE
UP. BUT YOU USUALLY WANT TO NAME BY FUNCTION
Rules IDs
Each element can have only one ID Each page can only have one element with that ID Once you use an ID on a page, you can not use it on
that page again. It can be used again on a different page in the same site.
You Can’t Do This: <div id=“footer” id=“container”> (has more than one ID) <div id=“column”> <ul id=“column”>
You’ve got a div and an unordered list with the same ID. This will not validate and probably not give the effect you want.
IDs and CSS IDs are targeted (or hooked into) on the CSS
page with a hash mark (#) in front of the id name
HTML
<div id=“container”>Content</div>
CSS
#container { width: 800px; height: auto; background-color: black; }
The CSS creates a container for the page that is 800 pixels wide, has a height that automatically expands as large as is needed, and has a background color of black.
Classes Classes are much more flexible. They are not unique.
Classes let you take a style that might be used often in your document and apply it liberally all around.
Classes also let you style an element differently from how its styled by default without the class applied.
Target Multiple Elements with Same Class <p class=“fancyscript”></p> <li class=“fancyscript”></p>
CSS .fancyscript {
font: blackadder; }
Now any element you assign a “fancyscript” class will appear in the blackadder font.
Note: in CSS, classes are identified with a period (.) in front of the class name.
Two (or more) different kinds of an element I often have different link styles for my
navigation versus inside the body text. Classes work wonders here.
<a href=“http://markdpepper.com”>Home</a>
<a class=“bodylink” href= “http://wikipedia.org/spider-man”>Spider-Man</a>
a.link { font-family: arial, sans-serif; font-size: 12px; }
a.bodylink { font-family: arial, sans-serif; font-size: 15px; color: green; }
HTML CSS
Stacking Classes I rarely do it, but unlike IDS, you can
technically stack multiple classes on an element
<img src=“groot.jpg” alt=“pic of groot” class=“displayblock” class=“fancyborder” />
Now this image, and just this image, will display as a block with a decorative border. Images not given these classes will behave per usual.
A Useful Metaphor Think of an ID as a student’s unique Student
ID Number This student ID# allows me to address one unique
singular student. I can send an email to just him or her.
Think of a Class as a way to address every single person who is a member of that class I can address everyone in the Digital Document
Design at once. I can send out a course email.
Summary Often you’ll just use a tag’s name by itself
<p>This is a paragraph.</p>
For a unique, occasional stylistic change you might add a class name
<p class=“emphasis”>This is paragraph with special stylized emphasis</p>
Sometimes you’ll want a style that you can apply to multiple elements, multiple times with a class <p class=“emphasis”></p> <ul class=“emphasis”></ul>
You’ve set up the possibility for paragraphs and unordered lists to both have a special emphasis styling
Summary ID names and classes are written in the HTML
by first writing the tag name immediately followed by id or class, an equals sign, and the id or class name in quotations <div id=“container”></div> <ul class=“navigation”></ul>
IDs are most often used on division sections of site layout: heading, navigation, left column, right column, footer, etc.
Summary In the CSS, IDs are targeted with a hashmark and the id
name #container {
Classes are either identified by themselves with a period .fancyscript {
Or identified with the accompanying element if it needs to be targeted too (i.e. other elements have that class but you don’t want them to take on the specific property) blockquote.fancyscript {
You want the <blockquote> tag to take on additional properties that the other fancyscript class members will not have
![[MS OXCDATA]: Data Structures - Microsoft · These structures include Ids, property tags, and property data types, and are used by client protocols for messaging and storage. Sections](https://img.pdfslide.us/doc/110x75/5f0933017e708231d425b243/ms-oxcdata-data-structures-microsoft-these-structures-include-ids-property.jpg)
