HTML
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 List 1. 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: 4 Required Tags for every Website Heading 1 Paragraph Ordered List (3 items) Unordered List (3 items) Definition List (5 items)
www.play-hookey.com 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;
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 some color 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: 4 Required Tags for every Website 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://
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 4 Required Tags for every Website 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: 4 Required Tags for every Website 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); >
HTML Assignment #6 Open Notepad & practice coding a Web site using the guide: 4 Required Tags for every Website 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 inline 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!
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; backgroundcolor: 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>
HTML Assignment #8 Open Notepad & practice coding a CSS Sheet & an HTML Web site using the guide: 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 Web Site (Class.html) 4 Required Tags for every Website 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
Hyper linking DOWN (HTML #9) Creating a Glossary of Choices: A B C Funny Angry Sad Setting Bookmarks id= Funny id= Angry id= Sad EXAMPLE: <h1 id= Funny >
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 Assignment #9 Open Notepad & practice coding a CSS Sheet & an HTML Web site using the guide: 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
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 Assignment #10 Open Notepad & practice coding a CSS Sheet & an HTML Web site using the guide: 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 Web Site (FOODS.html) 4 Required Tags for every Website 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 foods Paragraph2: 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)
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
HTML Review Assignment 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