Intro to:
HTML & CSS
-
HTML
-
Tag syntax
-
Author/browse our first HTML page
-
References & Examples
-
HTML activity + sharing
-
-
CSS
-
3 types
-
Rule syntax
-
References & Examples
-
Link our web page to a css doc
-
- Project + Homework
HTML and Tags
- HyperText Markup Language
-
Tags in angle brackets surround content and give it meaning:
-
Tags can be nested inside each other:
- Tags can have attributes to add further meaning:
<tag>Content</tag>
<pizza>
<topping>pineapple</topping>
<topping>ham</topping>
<topping>cheese</topping>
</pizza><tag attribute="value">Content goes here</tag>Anatomy of an html tag
<img src="path/to/image/file.jpg" alt="description" />attribute
value
attribute
value
<h1>This is a Heading</h1>opening tag
closing tag
self closing
HTML page structure
- Saved as text files (.html) readable by browser
- Doctype - tells the browser which version of HTML to use
- html - root element that starts & ends a page
- head - instructions for browser (not visible except <title>)
- body - all visible content goes here
<!DOCTYPE html>
<html>
<head>
<title>Page title goes here</title>
</head>
<body>
Content goes here!
</body>
</html>
Creating a home for our code
TTS / HTML
FIrst html page
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec metus justo. Aliquam erat volutpat.
<!DOCTYPE html>
<html>
<head>
<title>My first awesome web page</title>
</head>
<body>
<h1>Jaime's Page</h1>
<p>A simple page put together using HTML!</p>
</body>
</html>
Save as: myfirstwebpage.html
* No spaces! Dashes or underscores are OK :)
HTML Tag
reference
HTML Examples
- Headings
- Paragraphs
- Lists
-
Links
- relative
- absolute
- anchor
-
Images
- relative
- absolute
- divs & spans
Open up Sublime and let's play around with some HTML.
Create a brand new page called travel.html
html activity (~15 min)
-
Open a new file in Sublime and save it as list.html
-
Create a basic html page with a heading + an unordered list of 5 of your favorite restaurants.
-
Open your page in Chrome and holler!
My awesome list
<!DOCTYPE html>
<html>
<head>
<title>My favorite restaurants</title>
</head>
<body>
<h1>My faves</h1>
<ol>
<li>2 Urban Licks</li>
<li>Victory Sandwich</li>
<li>JCT Kitchen</li>
<li>Bar Taco</li>
<li>Antico</li>
</ol>
</body>
</html>10 minute break!
CSS
- Cascading Style Sheet
- Describes the look and formatting of HTML pages
- 3 ways to apply: inline, internal and external
Inline stylesheets
- dropped right into HTML code using "style" attribute
- only styles current element on current page
- good for troubleshooting
- avoid whenever possible
<p style="color:red;">This is my snazzy red paragraph!</p>
<p>This paragraph will not be red.</p>
Anatomy of a css rule*
h1 { color: gray; }selector
{ declaration block }
property
value
* Internal and external stylesheets
Internal stylesheets
- added to <head> between <style> tags
- only styles elements on current page
- avoid whenever possible
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size:50px;
text-align: center;
}
</style>
</head>
<body>
<h1>This is my huge headline</h1>
<p>Supporting paragraph. Very informative.</p>
</body>
</html>External stylesheets
- completely separate file, linked to in <head>
- reusable styles contained in 1 document
- best practice - use this one!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assets/stylesheets/styles.css">
</head>
<body>
<p>This is my snazzy red paragraph!</p>
</body>
</html>body {
width: 1000px;
margin: auto;
}
p {
color: red;
text-align: center;
}HTML
CSS
-
HTML tags such as p, h1, h2, body, etc.
-
No extra markup necessary
Types of CSS Rules
p {
color: yellow;
text-align: center;
}element selector
<p>
Something Awesome!
</p>Types of CSS Rules
#top {
background:gray;
text-align:center;
}id selector
-
can only use once per page
- use id attribute in HTML tag
<div id="top">
Something Awesome!
</div>-
can be used many times per page
- use class attribute in HTML tag
Types of CSS Rules
.blue-text {
color: blue;
text-decoration: none;
}class selector
<p class="blue-text">
Something Awesome!
</p>
<p class="blue-text">
Something else awesome!
</p>CSS properties reference
CSS activity
-
Open a new file in Sublime and save it as list-styles.css
-
Change the color of your unordered list of 5 restaurants with an element selector.
-
Change your favorite to a different color with a class selector.
-
Share with the class!
My Awesome list
<!DOCTYPE html>
<html>
<head>
<title>My favorite restaurants</title>
<link rel="stylesheet" href="assets/stylesheets/list-styles.css">
</head>
<body>
<ul>
<li>2 Urban Licks</li>
<li>Victory Sandwich</li>
<li>JCT Kitchen</li>
<li>Bar Taco</li>
<li class="fave">Antico</li>
</ul>
</body>
</html>li {
color: blue;
}
.fave{
color: red;
}HTML
list.html
CSS
list-styles.css
10 MINUTE BREAK
The Browser
Download and install Chrome at chrome.com
Most developers use Chrome because it comes pre-installed with a set of developer tools that make debugging and troubleshooting easier.
Project + homework
Create a 2 page personal website
index.html
- link to about.html
- write a "blog post" about anything you like
- include some images and heading tags
- style it up! (styles.css)
about.html
- link to index.html
- write your bio
- include at least 1 photo of yourself
- style it up (styles.css)
OPTIONAL TOPICS
- Tables
- Box Model
-
Eye Dropper Extension
(https://chrome.google.com/webstore/category/apps)
- Pixlr for photo editing
(http://pixlr.com/editor/)
-
Forms
(http://htmldog.com/guides/html/beginner/forms/)
HTML and CSS
By tts-jaime
HTML and CSS
Fall 2014 - FT & PT
