Html lesson1 5
- 1. HTML
- 2. HTML • Hyper Text Markup Language • Markup your text document • The markup is the tag • Hyper text means you can jump from place to place • Programming language of the internet
- 3. TAGS • Look like this: < > • Come in pairs (every begin tag must have an end tag) • <html> </html> PAIRS • TAGS do not show up on a web page • There are 3 REQUIRED TAGS • 1. <html> </html> ONLY ONE • 2. <head> </head> ONLY ONE (maybe put a title in here) • 3. <body> </body> ONLY ONE (stuff that shows up)
- 4. BASIC WEB PAGE <html> <head> <title> My page </title> </head> <body> Hello this is my page </body> </html> Head section Body section • Tags don’t show up on the page
- 5. TITLE ELEMENT • Goes inside the head element • If you forget it, you’ll have an untitled web page • Looks like this: <title> My Home page </title> • Where does the title show up?
- 6. TEXT FORMATTING Text formatting type What It Does Example paragraph Creates paragraphs of text <p> I’m my own paragraph </p> Line break Makes the browser go to the next line I’m Line 1. <br /> I’m Line 2. Bold Makes the text bold <b> I’m bold </b> Underline Makes the text underlined <u> I’m underlined </u> Italic Makes the text italic <i> I’m italic </i> Horizontal rule Line across the page <hr />
- 7. HEADINGS • Creates different sections for your page • <h#> </h#> replace # with an actual number (1-6) • 1 is the BIGGEST, 6 is the smallest heading • <h1> My heading </h1>
- 8. PICTURES • Put a picture on your page • <img src=“Name of your picture.extension” /> • Example: <img src=“me.jpg” width=“25%”/> • The picture MUST be in the same folder as the web page!
- 9. FIRST HTML SITE - GETTING STARTED! • Create a new folder called “website project 1” • Open up notepad ++ and click on the button named “Language” and under the “H” option click HTML. Save your file into your new folder. • Add all the required tags (What are they again?) • Title your web page: Project 1 • In the <body>, add 2 headings. Title the first heading: “My School” and the second: “Fun Stuff” • Separate the headings with a horizontal rule. • Find a picture of a school (use google images), download it into your project 1 folder, and add it to the “My School” section of your web page. • Add a paragraph with 5 sentences to the “My school” section of your page.