1 / 22

Basic HTML

Basic HTML. H yper t ext m arkup L anguage. Questions. What is your experience with computers? What do you hope to know at the end of this class? What do you think computer programming is?. Lesson Overview. In this lesson, you will learn to:

cira
Download Presentation

Basic HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Basic HTML Hyper text markup Language

  2. Questions • What is your experience with computers? • What do you hope to know at the end of this class? • What do you think computer programming is?

  3. 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

  4. Creating Web Sites • Open a simple text editor: • We’ll use Notepad++

  5. Class assignment 1 HTML tag header

  6. 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>

  7. 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?

  8. Class assignment 2 HTML tag paragraph

  9. 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>

  10. 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?

  11. Class assignment 3 HTML tag paragraph and header

  12. 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

  13. 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?

  14. Class assignment 4 HTML tag line breaks and paragraphs

  15. 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>

  16. Class assignment 5 HTML tag line breaks, paragraphs and header

  17. 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.

More Related