HTML & CSS 101
Kyle Waters
President UGOTTA
HTML & CSS 101
- HTML And CSS
- Dynamic Websites
Hyper-Text Markup Language
- Hyper Text means you have links to other pages
- Developed by Tim Berners-Lee in 1990
- Use tags to "markup" a plain text file
- < tag >
- Plain text files are an old standard often called ASCII.
White Space
- Block level elements usually begin and end a line
- Inline element typically do not
Lists
- ol -- ordered list -- numbered list
- ul -- unordered list -- bulleted list
- dl -- definition list -- dictionary definition type list
Images and Links
- img -- links to a picture that is stored else where on the server
- a -- used to make a clickable link
- the src attribute of the img tag is used to tell the browser where to look for the saved image file
- the alt attribute of the img tag is often used by screen readers for the blind
- the href attribue of the a tag is used to tell the browser where to go when the link is clicked on
- you do not need to use http when using href if you don't use http the browser will search for the file relative to your server
Containers
- the container classes are primarly used for css rules
Tables
- table
- thead
- tbody
- tr
- td
- th
- you should not use tables to layout your whole page
- you can use multiple tbody tags to seperate the table into different section for easy formatting
- more html tags:http://developer.mozilla.org/en/docs/Category:HTML:Element_Reference
Cascading Style Sheets
- specify locations
- change colors
- spacing
- plus much much more
- CSS was not an original part of HTML so there are other ways of doing these things left over from old HTML versions
- the div and span tags exist primarly so you can apply CSS rules to them
Three Ways of Using CSS
- inline style attributes
- style tag
- exterenal link tag
Properties
- color
- background-color
- text-align
- font-size
- width
- left
more properties:http://developer.mozilla.org/en/docs/Category:CSS_Reference
Box Model
- you can use border-left, margin-top, etc for each part of the box model
Forms
- form
- input
- textarea
- submit
- select
- forms can be mailed to an email address or posted, or sent via get to another webpage
Website Scripting
- Client Side Scripting
- Server Side Scripting
- AJAX
- scripting can be thought of as a simplier form of programming
Client Side Scripting
- javascript was originally called lightscript, it is not really related to java
- javascript is part of all major browsers and is also called emcascript
- javascript is widely used on many sites, especially by google
- flash is popular for videos and games
- java is a full fledge programming language and is often use for internal web applications
- flash and java bother require that the user has a plugin installed
Javascript
- widely used because it is already part of most computers
- easy to use to change text and other elements on the page
AJAX
- uses javascript to request an other page from the server
- the data from the page can then be added to the currently displayed page
- server side scripting is used to create the other page
- the other page is not returned in html but often xml
< /Dynamic Websites >