Hyper text markup Language 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 Ask one kid to sketch what other kids describe (magazine page that sketcher can’t see) Look at result—shortcomings? Sketch is probably not super-accurate Need a very specific, accurate page description language—HTML
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> <h1>This tag creates large text</h1> <h2>Creates a slightly smaller text </h2> <h3>Is smaller yet, but still large</h3> <h4>Starts getting smaller</h4> <h5>Now the text is getting small</h5> <h6>And finally, this is the smallest</h6> </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 “tags2_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> <p>This is a paragraph</p> <p>This is a second paragraph.</p> <p>This is my last paragraph</p> </body> </html>
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 <p> … </p> creates a block or paragraph of text. <br/> creates a new line. It is an opening and closing element in one, as designated by the slash at the end. <br/> vs. <p> … </p> 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> <p>This is first paragraph with break<br/> This is a second paragraph with break<br/> This is my last paragraph with break</p> <p>This is first paragraph</p> <p>This is a second paragraph</p> <p>This is my last paragraph</p> </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 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.