Website creation how to write html code to create websites

Tuesday, June 11, 2024
Study the image and explain what does this code create?
1
Retrieval Practice

2
Retrieval Practice - Answers
A simple website

HTML and Web Pages
Challenge– Complete a webpage with images.
Keywords
• HTML
• Tags
• Website
• Browser

HTML?
●Hyper Text Markup Language
●HTML is not a programming language
●HTML uses paired tags to markup different elements
of a page
●Language that drives web pages in WWW

Editing Your HTML File
●Use Notepad
●WYSIWYG editor, like FrontPage
●Understand the coding behind web pages
●Provides you with the knowledge to make
changes

Words to remember
●Tag
● Used to specify special regions to the web browser.
Tags look like this: <tag>
●Element
● A complete tag, having an opening <tag> and a closing
</tag>.
●Attribute
● Used to modify the value of the HTML element.
Elements will often have multiple attributes.

Element?
● An element consists of three basic parts: an opening
tag, the element's content, and finally, a closing tag.
● - opening paragraph tag
● Element Content - paragraph content
● - closing tag
● Every webpage contains four basic elements.
1. Html
2. Head
3. Title
4. Body.

Assessment Check
●What does HTML stand for?
●Hyper Text Markup Language
●What can you create with HTML code?
●A website or Web page
●List any examples of HTML codes.
1. Html
2. Head
3. Title
4. Body.

A Simple HTML File
<html>
<head>
<title>A Simple HTML Example</title>
</head>
<body>
HTML is Easy To Learn</H1>
Welcome to the world of HTML.
</body>
</html>

Tags
 Tags are embedded commands within a
document that communicate to the browser.
 Examples of Tags
 Paragraph Tag
 <h2>Heading Tag</h2>
 Bold Tag or Bold Tag 
 Italic Tag or Italic Tag 
Tags

Assessment Check
●What software can you use?
●Notepad
●What does the following code do?
 
<h2> </h2>
 
Paragraph Tag
<h2>Heading Tag</h2>
Bold Tag

Task 1 – Notepad
Open Notepad
Code your first website

Task 2 – Notepad
Add your first few HTML tags
Save your file as a webpage

Lists – un-numbered
● Unnumbered Lists:
<UL>
<LI> apples </LI>
<LI> bananas </LI>
<LI> grapefruit </LI>
</UL>
● Unnumbered Lists with
different pointer types:
<UL type="square">
<LI> oranges </LI>
<LI> peaches </LI>
<LI> grapes </LI>
</UL>
type="square"
type="disc"
type="circle"

Lists - numbered
● Unnumbered Lists:
<UL>
<LI> apples </LI>
<LI> bananas </LI>
<LI> grapefruit </LI>
</UL>
● Numbered Lists:
<OL>
<LI> oranges </LI>
<LI> peaches </LI>
<LI> grapes </LI>
</OL>

<HTML>
<HEAD>
<TITLE>The document title</TITLE>
</HEAD>
<BODY>
<H1>Main heading</H1>
A paragraph.
Another paragraph.
<UL> Things that I like </UL>
<LI>A list item.</LI>
<LI>Another list item.</LI>
</UL>
</BODY>
</HTML>
Task 3 – Put it all together so
far

Formatting
An example of Bold Text 
An example of Emphasized Text 
An example of Strong Text 
An example of Italic Text 
An example of superscripted Text 
An example of subscripted Text 
An example of <del>struckthrough Text</del> 
An example of <code>Computer Code Text</code> 
<center>Centering of text in page</center>

Hyperlinks
The most important capability of HTML
Both text and image can serve as anchors
for the link
<a HREF=https://www.langley.solihull.sch.uk/>Langley
School</a>
Task 4 – Hyperlinks

Hyperlinks
Use the following website to enhance your website:
https://www.w3schools.com/html/
Task 5 – Adding more
features

Website creation how to write html code to create websites

More Related Content

Similar to Website creation how to write html code to create websites

Recently uploaded

Website creation how to write html code to create websites