web technologies: lesson 2
DESCRIPTION
Second part of 8 for Web Technologies course at Unallocated SpaceTRANSCRIPT
WEB TECHNOLOGIES: LESSON 2
UnallocatedSpace
Last Week at UAS…
Fundamentals of the web. Languages of the web Notepad “Hello World” Slides are here:
http://www.slideshare.net/nhepner/web-technologies-lesson-1
Today…
Editors HTML
Review of tags Attributes Intro to basic HTML tags and usage Discussion of the Document Object Model
CSS How CSS relates to the DOM Different CSS properties References for CSS Quick review of some CSS3 properties
A Quick Word on Editors…
Ignore Fanboys. Use what works for you. Some, but not all editors…
VIM, Nano, emacs, notepad, SciTE WYSIWYG Editors
Setting up a project
Create a project folder Home page should be called
“index.html” May want to put images in “images”
folder, CSS in “css” folder, javascript in “scripts” folder. Not required, but helps for organization.
Lorem Ipsum
Typesetting text, used for testing and generating content.
http://lipsum.com
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in egestas metus. Etiam at libero diam, eu pulvinar neque. Integer arcu enim, hendrerit in convallis in, porttitor sit amet magna. Ut feugiat lectus vel augue congue posuere. Mauris mollis nunc sit amet arcu dictum quis dignissim mauris tincidunt. Morbi et orci lectus, a lacinia tellus. In hac habitasse platea dictumst. Morbi quis nibh sed eros sagittis pellentesque.
Vivamus nisi metus, tincidunt id posuere sed, euismod auctor lectus. Cras blandit viverra dui ac interdum. Nulla pharetra ante vitae arcu dignissim a dapibus orci gravida. Duis pretium urna eget enim pellentesque consectetur. Aenean ultricies urna a felis lobortis fermentum. Nulla in tellus placerat justo tempus iaculis. Aliquam erat volutpat. Mauris mattis velit a eros ultricies in egestas enim hendrerit. Suspendisse non nibh mi. Sed ipsum mi, tincidunt vitae molestie ut, sodales vel lorem. Proin sodales lacinia risus vitae pharetra. In et iaculis tellus. Phasellus bibendum tristique mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla egestas sodales orci, eu euismod sapien egestas sit amet.
Last Week’s Tags
<!DOCTYPE> <html> <head> <title> <body>
HTML Tags
What are tags? Closing Tags Comments Multiple tags should be written as FILO –
First In Last Out. HTML ignores whitespace in most cases.
Tag Attributes
Provide properties to HTML tags. Give the browser instructions on how to
handle the HTML tag. Listed within the tag itself
<img src=“example.gif” alt=“Example Image” />
You won’t remember all the attributes. Use Google and http://w3schools.com for reference
HTML Comments
Comment is code that is ignored by the browser. Useful for making notes.
Can be helpful for marking off closing tags.
Comments can be multiple lines. <!-- Any Text in here is comment -->
Text Formatting
<strong>This text is bold</strong> <em>This text is italic</em> <u>This text is underlined</u> (deprecated) Header tags
<h1>This is a large title tag</h1> <h2>This is a subheader</h2> <h3>Smaller header Tag</h3> … <h6>”smallest” header tag</h6>
<p>Starting a new paragraph</p> <br /> tags to force a line break. No closing tag. <span> for small, inline content edits.
Images
<img> tag Requires “src” attribute. “Height” and “width” attributes require
special attention. Crosslinking is bad. Try to host all images
locally unless specific image hosting site. No closing tags for images.
Anchor tags
<a> Requires ‘href’ attribute and link text Examples
General use <a href=“about.html”>About Us</a>
Can be used with images<a href=“about.html”><img src=“about.gif” /></a>
Can link to remote URLs<a href=“http://www.google.com”>Google</a>
“Linking” is another overloaded term.
Relative Pathing vs. Absolute Pathing
Relative pathing means using a partial link, relative to the resource that’s linking to it. If ‘about.html’ is in folder as ‘index.html’, a link between
them will just include the file name. If ‘about.html’ is in the ‘pages’ folder of the project, the link
from ‘index.html’ will include the folder name ‘pages/about.html’
In the above scenario, to link to a file in a parent folder, use ‘..’ as the folder name – ‘../index.html’. Can use as many times as necessary ‘../../../../../../index.html’
Absolute pathing means using a full link to a resource. Absolute pathing when linking to resources outside of your
site. Used to include external libraries.
Lists
<ol>Ordered lists</ol> are numbered lists <ul>unordered lists<ul> are bullet points. I don’t have a
clever pneumonic device for this. Comprised of <li>List Item</li> tags wrapped with either
<ol> or <ul> tags. Don’t forget to close your list tag. <ul>
<li>List item 1</li> <li>List item 2</li> <li>List item 3</li></ul>
Can be used to create navigation if anchor tags are included in the list items.
Can nest lists within each other.
Tables
NOT to be used for positioning. Comprised of many tags:
<table> Main table declaration. <tr> Defines a table row <td> Table rows are comprised of Table Data or table
cells. <th> Table header cell. <thead>Define table headers. Still comprised of <tr>
and <th> tags. Not a required tag, but helpful for browsers and spiders to identify content.
<tbody> Defines the main data section of a table. Same as above, not required.
Tables
<table> <thead> <!-- not required, just organizational --> <tr> <th>Title</th> <th>Author</th> <th>Price</th> </tr> </thead> <tbody> <!-- also not required --> <tr> <td>Flying on your own wings</td> <td>Chris Heintz</td> <td>$34.99</td> </tr> <tr> <td>Beginning Blender</td> <td>Lance Flavell</td> <td>$49.99</td> <tr> </tbody></table>
• <td> tags contain “colspan” attribute.• Don’t forget to close your tags!!
Divs
Separators for content. Very useful for content positioning. Useful for building CSS selectors.
Nesting
Denotes a parent-child relationship Nesting implies inheritance. Lists, tables, divs – most HTML structures
can be nested. (anchor tags cannot be nested).
HTML Selector attributes
Id attribute on elements that will only appear once on a page.
Class attribute on elements that require specific visual treatment List items Content regions
Document Object Model
Provides usable structure for manipulation and traversal of HTML documents by other languages and applications.
Relies on nesting and HTML Selector attributes to identify various page elements.
Cascading Style Sheets
Used to denote presentation. Basically, tells the browser how to treat HTML elements. Customizes HTML.
Include CSS files with the <link> tag. Requires href, rel, and type attributes
<link href=“css/style.css” rel=“stylesheet” type=“text/css” />
Does not require closing tag Much harder than it seems.
CSS Syntax
Requires Selector Comments are contained within /* comment */ Curly Brackets to contain listed properties
Property name, followed by colon, followed by property value. End line with semi-colon.
/* Styling for main menu */
#main-menu ul li {
background-color: #003366;
padding: 0;
margin-left: 35px;
}
Basic CSS Selectors
Uses the DOM to identify specific HTML components To reference an ID in your HTML, prefix ID name with
“#” #main-menu
To reference a class in your HTML, prefix class with a period .main-menu-item
HTML tags require no prefix Can mix and match to create selectors – narrows
specification. #main-menu li ul.menu li a.active
Hex Colors
http://www.w3schools.com/cssref/css_colorsfull.asp
Can use color names. Two digits for Red, Blue, Green
combination. Values for each digit can be 0-8, A-F. Better description here: http://www.w3schools.com/html/html_colors.asp
Create a commented list at the top of your document with colors and descriptors to help remember your color palette.
Reference
http://www.w3schools.com/html/default.asp
http://www.w3schools.com/html/html_css.asp