html - marion c. early rv schools€¢html •head (only one thing in the head—the title)...

4 Tags (Required for every Webpage)

• HTML <html> </html>

• Head <head> </head> (only one thing in the head—the title)

• Title <title> </title> (What appears in the blue bar)

• Body <body> </body> (Everything on the Screen)

Headings/Paragraphs

• Block Elements: will always have a blank line after them & include Headings, Paragraphs, & Horizontal Rules

• Headings: <h1> </h1> <h2> </h2>• Headings are always Block Elements• Headings are always Bold (DO NOT add strong tags around

headings!)• Headings are not always big• Paragraphs: <p> </p>• Horizontal Rule: is a line that goes straight across the page

<hr /> (does not have to be inside a heading or a paragraph tags)

• *Always make sure ALL block element tags are closed!!

Line Breaks <br />

• Do not use on it’s own…use it whenever you want an “Enter”

• <h6> This<br /> is<br /> a<br /> heading<br /> 6<br /></h6>

Save As

• Must save coding as .html to view in a Web Software (Internet Explorer).

HTML Assignment #1• Draw the HTML Guy in Microsoft Word using

shapes & include WordArt with the 4 tags that are required for every Website.

• Open Notepad & practice coding a Web site using the guide below:

4 Required Tags for every Website

Heading 1 (2 Headings)

Heading 2(4 Subheadings)

Paragraph (2 Sentences under each SubHeading)

Line Break (1 in-between any 2 sentences)

Types of HTML List1. UNORDERED (Bullets) <ul> </ul>

<ul><li>Ham</li><li>Eggs</li><li>Milk</li>

2. ORDERED (Numbers) <ol> <ol> (will automatically re-number)<ol><li>Steak</li><li>Bacon</li><li>Macaroni and Cheese</li></ol>

3. DEFINITION (Vocabulary Type List) <dl><dl><dt>Dog</dt><dd>An animal that barks.</dd><dt>Cat</dt><dd>An animal that meows </dd></dl>

**Can change bullets to squares, circles, etc. & numbers to roman numerals, letters, etc. BUT we’ll learn that a little later!

HTML Assignment #2• Open Notepad & practice coding a Web site

using the guide below:


Heading 1

Paragraph

Ordered List (3 items)

Unordered List (3 items)

Definition List (5 items)

Adding Color to your Website

• Inline Styles (for colors and other styles):

– Change Color of Background of entire page <body style=“”>

– Properties - color, background-color, text-align (PROPERTIES CANNOT HAVE A SPACE, Use a colon after the property)

– Values - red, blue, white, left, center (Use a semi colon after the property)

– Example “color: red;” or “background-color: red;”

www.play-hookey.com

http://www.play-hookey.com/



Color Codes• Values can be the color “red” or they can use

the Hexadecimal Code

• Hexadecimal Codes – Must have a # sign, Only consist of letters A-F and numbers 0-9

• You can go to Google & easily find HTML Color Code Charts, but you also need to learn somecolor codes (such as basic black 000000)!

• Example: <p style=“color: #99CC33;”>

HTML Assignment #3• Open Notepad & practice coding a Web site

using the guide below:


Heading 1 (3 each with a different color)

Paragraph (4 sentences each in a different color)

Unordered List, Ordered List (3 items each, each item in a different color)

Background Color (on page & different behind 1 paragraph)

Hyperlinks (HTML#4)• Jump from Webpage to Webpage

• You can hyperlink to a Webpage, Photo, Picture

• Hyperlink CODE: <a href=“”> </a>

• Href stands for hyperlink reference

• Example: Linking to a file in your folder: <a href=“HTMLCOLORSI.html”>Colors</a>

• Example: Linking to a webpage: <a href=http://www.google.com>Google</a>– You must use http://

http://www.google.com/

Advanced Hyperlinks• Hyperlinks should all be in the same folder!• Link to a webpage in a folder: <a href=“first.html”• Link to a picture in a folder: <a

href=“pics/family.jpg” (must put folder name first)• If a webpage was in the pics folder…

– ../first.html– .. Means back up a folder

• If you want hyperlink to open in a new window: <a href=“isaac.jpg” target=“_blank”>

• If you want to add a title for your link: <a href=“isaac.jpg” target=“_blank” title=“click to see my little cutie!”> Isaac </a>

• REMEMBER: Hyperlinks must be inside a paragraph or heading tag inside of the body!

HTML Assignment #4

• Open Notepad & practice coding a Web site using the guide:


Heading 1 (3)“Hyperlinks to Websites”, “Hyperlinks to Pictures”, “Hyperlinks to Webpages”

Paragraph (4 Hyperlinks under each heading 1 must be inside of a paragraph tag)

Hyperlinks•4 Website Hyperlinks•4 Picture Hyperlinks•4 Webpage in a Folder Hyperlinks (must be titled & have a heading 1) as follows: “Webpage1Practice”, “Webpage2Practice”, “Webpage3Practice”, “Webpage4Practice”**It is best to NOT have spaces in Webpage names

Color & Internal Styles Review (HTML#5)

• Free web design software– PS Pad

– Play-Hookey.com

– Html-color-codes.info

• <h1 style=“text-align: center; font-style: italics; color: #FF0000;>Colors!</h1>

• Hexadecimal Color Codes (RGB): FF is the degree of red, 00 is degree of green, 00 is degree of blue

Color & Internal Styles Review (HTML#5)

• Add Style Codes into the HEAD• <style></style>• Style Codes:

– body {} – h1{}– A: link{}– A: hover{}

• Hyperlinks are shown in blue by default, but it can be changed using “a: link, a: visited, a: hover”

• To add color to only one word or something that you cannot connect it to: <span style=“color: purple;”> purple </span>

HTML Assignment

#5• Open Notepad

& practice coding a Web site using the guide:


Heading 1 (3)Heading 2 (1)

Paragraphs (3 separate sentences)•Add color/style to 1 paragraph that is different from the rest of the body•Add a color to ONE word in a paragraph that is different from the rest of the paragraph

Hyperlinks•1 Website Hyperlink•1 Picture Hyperlink•1 Webpage in a Folder Hyperlink**Do NOT have spaces in Webpage or Picture file names when you are linking to them

Add Color/Style to the Head using these codes:•Body {}•H1 {}•H2 {}•A:link, A:visited {}•A:hover {}

Image/Background Images (HTML#6)

3 Types of Images• GIF Images – animations, low color, clipart, transparency (256 colors)• JPG – photographs, high color (16 million colors)• PNG – transparency (high quality than GIF, but not as high as JPG)

Animations Website: www.gifanimations.com• <image src= “dinosaur.gif” />• Text Alternative (alt text) <image src= “dinosaur.gif” alt= “running dinosaur animation”

/>– descriptive text about the image– Accessibility (if tag doesn’t work)

• Animations MUST BE INSIDE A PARAGRAPH TAG—IF YOU WANT ANIMATION CENTERED <p style= “text-align: center;”>)

• Animations can also be “floated” <image src= “dinosaur.gif” alt= “running dinosaur animation” style= “float: left;” />

Background Image Website: www.grsites.com• To add background to the BODY: <style> body{ background-image: url(filename);

}</style>• To add a background to a heading: <h1 style= “background-image: url(filename);”>

http://www.gifanimations.com/

http://www.grsites.com/

HTML Assignment

#6• Open Notepad

& practice coding a Web site using the guide:


Styles Added to the Head:•Style body 18 pt. Arial font with blue font color (using a hexadecimal code..not color “blue”) & black background•Style Heading 1 with 28 pt. Georgia font with white font colors & green background color (use hexadecimal code..not color “green”)•Style hyperlink color to yellow (use hexadecimal code) & visited hyperlink to pink (use hex code)

Add hyperlink to a picture of a school (must open a new window) & add a hyperlink to the MCE Website

Add an animation to the bottom of the website that floats right (gifanimations.com)

Heading 1: “School Memories”

Paragraph: write two sentences about your two favorite school memories.

Unordered list: list your 2 least favorite subjects/classes in school.

Ordered list: list your top 3 favorite lunch menu items at school.

List Styles (HTML #7)• Unordered List

– Disc is the Default bullet– You can change to Circle or Square (NOT PLURAL)

• Ordered List– Numbers are the Default– You can change to upper-alpha (A. B. C.), lower-alpha (a. b. c.),

upper-roman (I, II)

• Better to change in the internal style sheet rather than in-line style

• ul { list-style-type: square; }• ol { list-style-type: upper-alpha; }• { list-style-image: url (filename.gif) }• Bullet Website: www.websitebullets.com**Make sure you save your bullet image in the HTML folder!

http://www.websitebullets.com/

HTML Assignment #7

• Open HTML #6 in Notepad & practice coding a Web site using the guide:

ALL LIST STYLES SHOULD BE DONE IN THE HEAD!!

Change to a circle or square bullet for your unordered list.

Change to a uppercase roman numerals for your ordered list.

Add another unordered list and use an image for the bullets.

External Style Sheets (HTML #8)

• A CSS document comment line: /*CSS Document by your name for animal science project*/

• CSS documents are exactly the same as HTML just without the style tags

• Example: body { color: yellow; background-color: pink; } h1 { color: black; }

• Save as a CSS Page: .css

Linking External Style Sheets (HTML #8)

• How to link to the style sheet• IN THE HEAD: insert a link tag: <link rel= “” type=

“” href=“” />• Example: <link rel= “stylesheet” type=“text/css”

href= “FILENAME” />• Dreamweaver: Click on HTML or CSS • Dreamweaver: Code, Split, or Design View• Open Notepad Files in Dreamweaver• Dreamweaver CSS: CSS Codes automatically

pop-up in a drop-down list!

Linking External Style Sheets (HTML #8)

• Creating a “Class” in CSS Style Sheet:

• Examples:

• .red { color: red; font-weight: bold; }

• .green { color: green; font-style: italic;}

• Inserting classes into HTML Sheet:

• Examples:

• <span class= “red”> red </span>

• <span class= “green”> green </span>

• Open Notepad & practice coding a CSS Sheet & an HTML Web site using the guide:

HTML Web Site (Class.html)


Link to Style Sheet in the Head:•<link rel= “stylesheet” type=“text/css” href= “FILENAME” />

Add a hyperlink to a college/university website that you plan to attend

Heading 1: “What I want to do with the rest of my life!”

Paragraph1: Write three sentences about your plans after high school.Paragraph2: Write two sentences about challenges you must overcome to achieve your plans.

Style Paragraph 2 ONLY: Orange font color & White background color

CSS Sheet (Classstyle.css)

Add comment tag “/*CSS Document by your name for HTML Assignment 8*/”

•Style Body:• 28 pt. Arial font with Purple font color (using a hexadecimal code) & Black background

•Style Heading 1:•28 pt. Georgia font with white font color & Hot Pink background (use hexadecimal code)

•Style hyperlink:•Bright Yellow font color (use hexadecimal code) & visited hyperlink to green (use hex code)

HTML Assignment

#8

Hyper linking DOWN(HTML #9)

• How to hyperlink Glossary Terms to Bookmarks

– <a href= “#Funny”> </a>

– <a href= “#Angry”> </a>

– <a href= “#Sad”> </a>

• If the link doesn’t jump all the way down, the page is not long enough

• Adding Hyperlinks Down makes it easier for the viewer to navigate the page.


•HTML Web Site (Plans.html)

•4 Required Tags for every Website

•Add a Glossary to the top of the HTML Page with the following Terms: “Plans”, “Goals”, “Obstacles”

•Add the following Heading 2: “Plans”, “Goals”, “Obstacles”

•Add bookmark tags to each of the Heading 2

•Add Hyperlinks to the Glossary Terms

HTML Assignment

#9

Styling Images & Resizing in Photoscape (HTML #10)

• Styling Images (on css stylesheet)– Img {}– Things to add to images:

• Border-style: groove;• Border-width: 10px;• Border-color: black;• Display: block;

• Photoscape– FREE PHOTO EDITING PROGRAM– Batch Editor, find folder w/ pictures & drag to middle (white space)– Adjust width: 300 pixels, Convert All, Save in the same folder as the same

name, SAVE (save as small version if you plan to link to big picture)

• Picture Fixes:– Img{ clear: both; }– Img { float: left; }– Img { margin-left: 10px; margin-right; 10 px;}


HTML Web Site (FOODS.html)


Link to Style Sheet in the Head:•<link rel= “stylesheet” type=“text/css” href= “FILENAME” />

Add a hyperlink to a website

Heading 1: “My Favorite Foods”

Paragraph1: Use an Unordered List to name your 5 favorite foodsParagraph2: Find a recipe for one of your favorite foods and copy paste it into your HTML document

Images: Add a picture of each of your favorite foods (5) at the bottom of the webpage (resize one image to a width of 700 pixels)

CSS Sheet (Foodstyle.css)

Add comment tag “/*CSS Document by your name for HTML Assignment 10*/”

•Style Body:• 16 pt. Georgia font with White font color & Blue background color (use hex code)

•Style Heading 1:•40 pt. Arial font with Orange font color & Bright Green background (use hexadecimal code)

•Style hyperlink:•Bright Yellow font color (use hexadecimal code)

•Style Images:•30 pixel White groove border•Block style images

HTML Assignment

#10

CoolText & Creating Linked Buttons (HTML #11)

• Free Buttons, Logos, Fonts, Text Website:– http://www.CoolText.com– http://flamingtext.com

• Types of Fonts:– Serif (straight fonts)– Sans-Serif (curly/fancy fonts)

• Save Buttons as .png files in folder• To link to button Image:

– Open Hyperlink tag: <a href= “next.html”>– Image tag: <img src= “next.png” alt= “click to go to next page” />– Close Hyperlink tag: </a>

• To get rid of hyperlink around button:– CSS Sheet--Img { border: none; }– OR CREATE A CLASS FOR IMAGES WITHOUT A HYPERLINK BORDER

http://www.cooltext.com/

http://flamingtext.com/

• 4 Required Tags (for every webpage)• Heading, Heading2, Paragraph Tags• Line breaks & Horizontal Rule Tags• Save as HTML, CSS, JPEG, PNG, TIF, GIF• List Tags (ordered, unordered,

definition)• Adding Color (font color, background

color)• Text Alignment Tags• Hex Color Codes• Adding Hyperlinks (to Webpage,

Website, Pictures)– New Window for Hyperlinks– Title for Hyperlinks

• In-line Styling • CSS Sheet Styling (body, h1, hyperlink,

hyperlink visited, images, lists)• Span Tags• Adding Animated Images

– Alt Text

– Float Style• Background Images (style in CSS)• Changing List Styles (to Circle, Bullet,

Images)• Linking to CSS Sheet• Creating a Class in CSS Sheet & Applying

Class in HTML Sheet• Hyperlinking Down (Glossary)

– Set bookmarks– Hyperlink Glossary Abbreviations

• Styling Images– Border Style– Border Width– Border Color– Display (block)– Margins (left/right)

• Resizing Images• Buttons

– Creating a button– Hyperlinking buttons

HTML Review Assignment

html - marion c. early rv schools€¢html •head (only one thing in the head—the title)...

Documents