Basic HTML Hyper text markup Language Lesson Overview

Basic HTML Hyper text markup Language

Lesson Overview In this lesson, you will learn to: § Write HTML code using a text editor application such as Notepad++. § View Web pages created with HTML code. § Create a title within an HTML document. § Format text within a Web page. § Creates tags with attributes. § Text alignment and horizontal ruler

Creating Web Sites Open a simple text editor: § § We’ll use Notepad++

Class assignment 1 HTML tag header

Type this code into a Notepad++ document: <html> <head> <title>Tags and Attributes</title> </head> <body> <h 1>This tag creates large text</h 1> <h 2>Creates a slightly smaller text </h 2> <h 3>Is smaller yet, but still large</h 3> <h 4>Starts getting smaller</h 4> <h 5>Now the text is getting small</h 5> <h 6>And finally, this is the smallest</h 6> </body> </html>

Create an HTML file § § § Create a folder “Web Design” on your computer’s fileshare Create a folder “class assignments” Save the code that you just created as “tags 2_1_16. html” in the folder “class assignments” The extension. html designates a file to be opened by a browser Access the file and open it. What do you see?

Class assignment 2 HTML tag paragraph

Type this code in a notepad document <html> <head> <title>Tags and Attributes</title> </head> <body> This is a paragraph This is a second paragraph. This is my last paragraph </body> </html>

Create an HTML file § § § Save the code that you just created as “assignment 2 para. html” in the folder “Web designclass assignments” Access the file and open it. What do you see?

Class assignment 3 HTML tag paragraph and header

§ § § Open notepad++ Using the header and paragraph html tags that you have learnt in assignment 1 and assignment 2 create the web page shown next Save the code that you just created as “twocities. html” in the folder “Web designclass assignments” Access the file and open it Debugging tip: save html file in notepad. Use refresh (F 5) button on your browser to see changes in code

Breaks and paragraphs • • • … creates a block or paragraph of text. creates a new line. It is an opening and closing element in one, as designated by the slash at the end. vs. … It is common convention that breaks live in paragraphs, but when do you use each?

Class assignment 4 HTML tag line breaks and paragraphs

Type this code in a notepad document(please include header and html tags) <body> This is first paragraph with break This is a second paragraph with break This is my last paragraph with break This is first paragraph This is a second paragraph This is my last paragraph </body>

Class assignment 5 HTML tag line breaks, paragraphs and header

§ § § Open notepad++ Using the header paragraph and break html tags that you have learned, create the web page shown next Save the code that you just created as “charles. html” in the folder “Web designclass assignments” Access the file and open it. Debugging tip: save html file in notepad. Use refresh (F 5) button on your browser to see changes in code.