ART 379 Web Design
ART 379 Web Design
History:
90s browsers (netscape & internet explorer) only read their own specific set of html. made designing web pages difficult!
ART 379 Web Design
History:
90s browsers (netscape & internet explorer) only read their own specific set of html. made designing web pages difficult!
(this is why you would see disclaimers at the start of sites that said “best viewed in IE 3.0”)
W3C, the World Wide Web Consortium, pushed for standardization, first with HTML 3.2, then HTML 4 and CSS. (And now HTML 5 and CSS3!)
ART 379 Web Design
History:
90s browsers (netscape & internet explorer) only read their own specific set of html. made designing web pages difficult!
(this is why you would see disclaimers at the start of sites that said “best viewed in IE 3.0”)
W3C, the World Wide Web Consortium, pushed for standardization, first with HTML 3.2, then HTML 4 and CSS. (And now HTML 5 and CSS3!)
CSS (cascading style sheets) allows for rules to be applied to a whole site, not just to a single page. Any old formatting tags are now
ART 379 Web Design
XHTML: the mix of XML + HTML
XML is the W3Cs answer to creating a more flexible platform on
which to write pages. HTML alone doesn’t allow for easy expansion (new tags, etc).
ART 379 Web Design
XHTML: the mix of XML + HTML
XML is the W3Cs answer to creating a more flexible platform on
which to write pages. HTML alone doesn’t allow for easy expansion (new tags, etc).
Browsers aren’t all up to date with the new standards though, and in order for old sites to still be read, W3C rewrote HTML in XML. The combination = XHTML
ART 379 Web Design
XHTML: the mix of XML + HTML
XML is the W3Cs answer to creating a more flexible platform on
which to write pages. HTML alone doesn’t allow for easy expansion (new tags, etc).
Browsers aren’t all up to date with the new standards though, and in order for old sites to still be read, W3C rewrote HTML in XML. The combination = XHTML
XHTML is more strict. Remember your quotation marks. No capital letters. The standard for US accessibility regulations. Works best with the newest browsers.
ART 379 Web Design
How This Book Works:
ART 379 Web Design
Vocabulary
ART 379 Web Design
Vocabulary
Markup: information about the content of a site.
ART 379 Web Design
Vocabulary
Markup: information about the content of a site.
3 principle types: Elements, Attributes, & Values
ART 379 Web Design
Vocabulary
Markup: information about the content of a site.
3 principle types: Elements, Attributes, & Values
regular: surround text empty: no text content
ART 379 Web Design
Vocabulary
Markup: information about the content of a site.
3 principle types: Elements, Attributes, & Values
regular: surround text empty: no text content
definition of <em>ephemeral</em> <img src=”blueflax.jpg” />
opening tag
closing tag
3 principle types: Elements, Attributes, & Values
ART 379 Web Design
Vocabulary
Markup: information about the content of a site.
contain information about the data
3 principle types: Elements, Attributes, & Values
ART 379 Web Design
Vocabulary
Markup: information about the content of a site.
contain information about the data
located inside an element’s opening tag
<img src=”blueflax.jpg” width=”300” />
3 principle types: Elements, Attributes, & Values 3 principle types: Elements, Attributes, & Values
ART 379 Web Design
Vocabulary
Markup: information about the content of a site.
always in quotes numbers (pixels), percentages, lowercase predefined names
ART 379 Web Design
Identify the parts:
<link rel=”stylesheet” type=”text/css” media=”screen” href=”blueflax.css” />
ART 379 Web Design
Identify the parts:
Element
<link rel=”stylesheet” type=”text/css” media=”screen” href=”blueflax.css” />
ART 379 Web Design
Identify the parts:
Attribute
<link rel=”stylesheet” type=”text/css” media=”screen” href=”blueflax.css” />
ART 379 Web Design
Identify the parts:
Value
<link rel=”stylesheet” type=”text/css” media=”screen” href=”blueflax.css” />
ART 379 Web Design
Identify the parts:
Element Attribute
<link rel=”stylesheet” type=”text/css” media=”screen” href=”blueflax.css” />
ART 379 Web Design
Block vs. Inline
Elements can be block or inline.
Block: will begin on a new line on your site. Inline: will only affect text or other inline elements. Will not start on a new line.
ART 379 Web Design
Block vs. Inline
ART 379 Web Design
Parents and Children
If one element contains another, it is considered to be a parent of the enclosed, or child element.
Any elements contained in the child element are considered descendants of the parent element.
This differentiation will become much more important later, when you start using CSS to style your websites. For now, just be aware of the distinction.
ART 379 Web Design
Nesting
the most important thing to remember is to keep nested elements in the correct order:
ART 379 Web Design
Nesting
keep nested elements in the correct order:
<p>...of <em>ephemeral</em></p>
<p>...of <em>ephemeral</p></em>
ART 379 Web Design
Translations!
the default structure of a site is: in the order you write it!
ART 379 Web Design
Translations!
ART 379 Web Design
Links, Images, other non-text Content
you store this data elsewhere, and reference it in your XHTML.
ART 379 Web Design
Absolute vs. Relative URLs
there are two ways to reference a link: either from files you have uploaded yourself OR from a site elsewhere.
<img src=”www.flowers.com/blueflax.jpg” width=”300” /> the example above is an absolute link.
ART 379 Web Design
Absolute vs. Relative URLs
there are two ways to reference a link: either from files you have uploaded yourself OR from a site elsewhere.
<img src=”/blueflax.jpg” width=”300” /> the example above is a relative link.
ART 379 Web Design
Absolute vs. Relative URLs
there are two ways to reference a link: either from files you have uploaded yourself OR from a site elsewhere.
<img src=”/blueflax.jpg” width=”300” /> the example above is a relative link.
what does that mean?
what does the / mean in the code? why would you use this?
what would my code be if my images were in a folder named “images”?
ART 379 Web Design
Organizing Files
Organization is going to be key as your web site grows Create a folder on your desktop mywebsite
ART 379 Web Design
General Rules
•use only lowercase letters for the names of files and folders
•use the proper extension for each page: .html
•review that you have closed all open tags and “quotes”
when you find you have a problem.
ART 379 Web Design
Review:
How do you upload your html file to be viewed online? What must your homepage be named?
ART 379 Web Design
Quick Site!
ART 379 Web Design
Practice
Continue with the html basics on the W3 schools basics website. You can find the link on our tumblr site:
