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++

Notepad++ Defaults  Settings->Preferences  New Document  Default Language  HTML  Create a folder on your homedirs named Web Design

Class assignment 1 HTML tag header

Type this code into a Notepad++ document: Tags and Attributes This tag creates large text Creates a slightly smaller text Is smaller yet, but still large Starts getting smaller Now the text is getting small And finally, this is the smallest

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 “assignment1tags.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 Tags and Attributes This is a paragraph This is a second paragraph. This is my last paragraph

Create an HTML file  Save the code that you just created as “assignment2para.html” in the folder “Web design\class 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 design\class assignments”  Access the file and open it  Debugging tip: save html file in notepad. Use refresh (F5) 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) 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

Class assignment 5 HTML tag line breaks, paragraphs and header

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