Download presentation
Presentation is loading. Please wait.
1
Bell Ringer Conduct your own research & answer the following questions (1 paragraph). What is HTML? Who developed HTML? How is it used in web design?
2
HTML Tags IDT 8: Create and Organize web pages through the use of a variety of web programming design tools.
3
Flash drive Navigate to your flash drive.
Create a folder called websites Inside the websites folder – Create another folder called practice.
4
What is HTML? Hypertext Mark Up Language – coding language used to create web pages. HTML uses tags to code a web page. HTML tags are keywords (tag names) surrounded by angle brackets like <html> HTML documents are also called web pages Latest version is HTML 5
5
What software? Use a text editor to create a web page Notepad
6
Web page code outline <!DOCTYPE html> <html> (open tag)
<head> (open tag) <title> (open tag) </title> (closing tag) </head> (closing tag) <body> (open tag) </body> (closing tag) </html> (closing tag)
7
Simple page of Code <!DOCTYPE html> <html> <head>
<title>First Page</title> </head> <body>Hello! This is my first page of code. I can't believe I'm on my way to being a webmaster. This is so great!!! </body> </html>
9
Saving an HTML document
File – Save As Navigate to your websites folder – practice folder In your practice folder save your page as: index.html The homepage for a website is always saved as index.html!
10
What does that look like?
11
Did you notice anything?
Regular text No break when an ENTER was keyed Nothing exciting about page No design elements used Formatting is needed
12
Look at some additions (changes in Red)
<html> <head><title>First Page</title></head> <body bgcolor="blue"> <hr> Hello! This is my first page of code. I can't believe I'm on my way to being a webmaster.<p> This is so great!!! </body> </html>
13
Here’s what those did…
14
What changed? Background color Breaks in text Horizontal rules
All with just a few keystrokes
15
Additional helpful tags
<p> paragraph break - similar to double space in a word document. <br> line break – similar to single space in a word document <font color =“red”>Change text color</font> <h1> Heading tag – creates large, bolded text</h1> Heading tags range from h1 (largest) to h6 (smallest)
16
Open a browser Go to
17
What can you create? Edit and add the following content to your page:
Name Grade “I like Introduction to Digital Technology because I have learned…” Clubs and activities you are involved in.
18
Open the notes you took over HTML. Review the tags that you learned.
Go to w3schools.com. Click on the HTML tutorials. Read through the first 4 chapters…HTML Home – HMTL Basic.
19
Three Page Website About Me. 1st Page - index. html 2nd Page – hobbies
* Three Page Website About Me *1st Page - index.html 2nd Page – hobbies.html 3rd page – family.html and friends.html
20
Go to the Class website We’re moving on to web design
Go to the Class website We’re moving on to web design! Go back to your normal seats
Similar presentations
