intro to html - 1 format of textx
Download
Report
Transcript intro to html - 1 format of textx
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:
<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
“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
<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 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.