Working with HTML

Presentation

•

Computers

•

5th Grade

•

Hard

97412556 Shamsul

Used 5+ times

FREE Resource

46 Slides • 0 Questions

Working with HTML

by Shamsul Annuar Hj Sulaimin

Terms in HTML

World Wide Web (WWW)

Systems of Internet servers that support specially formatted documents in a language called Hyper Text markup language (HTML).

It makes possible to jump from a document to another document by clicking the hot spots.

It needs web browsers to be access into WWW.

Terms in HTML

Web Browser

A web browser, also known as an internet browser or simply a browser, is a software application that lets people access the World Wide Web.

A web browser is a type of software that allows you to find and view websites on the Internet.

Common web browsers include Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, and Apple Safari.

Terms in HTML

HTML

Hyper Text Markup Language the authoring language used to create documents on the WWW.

HTML defines the structure and layout of a Web document by using a variety of tags and attributes such as <HTML code> and </HTML code> to structure text into headings, as well as paragraphs, lists, hypertext links etc.

Terms in HTML

File naming convention

Every HTML file should have an extension of“.htm” or”.html” in order to the browser can recognize it.

Terms in HTML

Hypertext

Hypertext is text with links. With hypertext the computer makes the following such references as easy as turning the pages. Readers can escape from the sequential organization of the pages.

Terms in HTML

Text editor

A text editor is a computer program that lets a user enter, change, store, and usually print text where characters and numbers, are encoded by the computer to have meaning to users or to other programs.

Notepad is a simple text editor for Microsoft Windows and a basic text-editing program which enables computer users to create documents.

Standard tags and format used

<html>

<title> (enter here what document is all about)</title>

<body>

(here comes the contents of the page)……….. and ends with

</body>

</html>

Steps to start your HTML file

Step 1

Launched your Notepad by following this steps :

I. Click your Start button

II. Drag your cursor to the Program folder

III. Locate the Accessories folder

IV. Drag the cursor the Notepad applications

Step 2

Then type this into your Notepad screen:

<html>

<body>

WELCOME TO MY FIRST WEBPAGE

</body>

</html>

Save the file by pressing File and Save.

When it ask for file name, Save As “file1.html”.

Remember every time when you want to save your new works, change the save as type from Text Document (.txt) into All Files.

Steps 3

Viewing your first HTML file in browser.

Launched your web browser such as Internet Explorer, Google Chrome etc.

At your browser, locate Menu Bar and click at File then Open and Browse.

Find the location of .html file saved and click on it.

you will find the partial URL at the checkbox and click OK

Steps 4

Modifying an existing HTML file

You can at any time to make modifying to your HTML file.

After completely made changes, you can simply save the file.

To confirm the changes you have made, you need to refresh the page by using the Refresh button

HTML TAGS AND APPLICATIONS

<!DOCTYPE>

Defines the document type

<html>

HTML tag: It is the root of the html document which is used to specify that the document is html.

<head>

Head tag: Head tag is used to contain all the head element in the html file. It contains the title, style, meta, … etc tag..

HTML TAGS AND APPLICATIONS

<body>

Body tag: It is used to define the body of html document. It contains image, tables, lists, … etc.

<title>

Title tag: It is used to define the title of html document.

HTML TAGS AND APPLICATIONS

Open and closed tags.

Open tag

<...>

Closed tag

</....>

Example

<title>index</title>

remember you need to closed the tag application to stop the application from continuously apply.

Heading Tags

It is used to define the heading of html document.

<h1> this is Heading1</h1>

<h2> this is Heading2</h2>

<h3> this is Heading3</h3>

<h4> this is Heading4</h4>

<h5> this is Heading5</h5>

<h6> this is Heading6</h6>

Paragraph Tag

It is used to define paragraph content in html document.

Without <p> tag, the text in your HTML document will appear as large continuous paragraph.

<p> Statements... </p>

Bold tag

It is used to specify bold content in html document.

By using bold tag you will have the bold text.

<b> Statements... </b>

Italic tag

It is used to write the content in italic format.

The text will become italic style

<i> Statements... </i>

Underline tag

It is used to set the content underline.

it will underline the text

<u> Statements... </u>

Small (text) tag

It is used to set the small font size of the content.

Text will slightly smaller than normal

<small> Statements... </small>

Deleted text tag

It is used to represent as deleted text. It cross the text content.

Representing as deleted text by strike-through text

<strike> Statements... </strike>

Big (text) tag

It is used to set the big font size of the content.

Text will slightly bigger than normal

<big> Statements... </big>

Text alignment tags

Left margin

<P align= “left”>…</p> the paragraph will start at the left margin

Right margin

<P align= “right”>…</p> the paragraph will start at the right margin

Center

<P align= “center”>…</p> the new paragraph will begin at the center.

Font control

To control the font either in size, face or color.

Font size

To set the size of any text on a Web page range from font size 1 to 7.

Font color

You can have a color text by inserting the HTML color tags.

<font color=”green”> this text is green</font>

<font color=”yellow”> this text is yellow</font>

<font color=”purple”> this text is purple</font>

Font face

This tag will enable you to have the variety font text such as Arial, Tahoma, Algerian…etc.

<font face=”Arial”> this is an Arial font</font>

<font face=”Tahoma”> this is a Tahoma font</font>

<font face=”Algerian”> this is an Algerian font</font>

<font face=”Comic Sans MS”> this is a Comic Sans MS font</font>

Combination of font tags

You can combine all the font tags in one-text documents such as size, face and color.

<font size=”7”,font face=”Arial”, font color=”red”> WELCOME TO MY FIRST WEB PAGE</font>

Arranging text list

There are 3 basic types of HTML lists.

<ol> Ordered List

<ul> Unordered list or bulleted list

<dl> Definition list

Ordered lists

List is arranged in number and tags begins with <ol> and end with </ol>.

<ol>

<li>durian</li>

<li>rambutan</li>

<li>pulasan</li>

</ol>

Bulleted lists

Also called as unordered list which have bulleted appeared in list.

<ul>

<li>durian</li>

<li>rambutan</li>

<li>pulasan</li>

</ul>

Definition list

The list of item and their meaning.

<dl> Definition list

<dt> Definition terms

<dd> Definition data

<dl>

<dt>HTML

<dd>Hyper Text Markup Language

<dt>ISP

<dd>Internet Service Provider

</dl>

Link to a specific page

Links are hypertext that will connect to other locations and address whenever it are clicked.

Remote links

Remote links is used when the locations specified in the tag are not on your computer such as connecting to search engine

<a href=“http://www.yahoo.com”>Yahoo.com</a>

E-mail links

This links will aloud the user to be link to your e- mail as a feedback or “talk back” to you.

Placing an image

The HTML <img> tag is used to embed an image in a web page.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

Labeling an image

You can label or write a message in place of the image.

Hot-Spot Image

You can have a graphic as a link on your web page.

< a href=”http:///www.uitm.edu.my”><img src=”A:/ UiTM logo.gif”></a>

Changing background colors

You can change the colors of your own choice at any time.

Background image

You can also fill the background with graphics by using images as wallpaper tile behind text.

Layout with tables

Tables can be creating with HTML by using the tags described follows.

<table>

Defines the beginning and of the data.

Defines the caption for title of the table.

<tr>

Defines the beginning and end of the data in a table row.

<td>

Defines the data in table cell.

<th>

Called as cell header.

Layout with tables

<table>

<tr>

<th>Fruits

<th>Animals

<tr>

<td>Durian

<td>Tiger

<tr>

<td>Orange

<td>Deer

</table>

Develop your homepage

<html>

<body>

<h1>WELCOME TO MY WEBPAGE</h1><br>

</body>

</html>

END OF HTML CLASS

Working with HTML

by Shamsul Annuar Hj Sulaimin

Show answer

Auto Play

Slide 1 / 46

SLIDE

Similar Resources on Wayground

41 questions

Towers & Buildings

Lesson

•

5th Grade

44 questions

Binary lesson 3 and Recap

Lesson

•

4th Grade

41 questions

Non-Fiction Text Types and Features

Lesson

•

5th - 6th Grade

42 questions

Quarter 1 - Week 3 - PMDAS, GMDAS

Lesson

•

5th Grade

36 questions

PowerPoint Part 3

Lesson

•

5th Grade

42 questions

i learn smart start 5 - theme 6

Lesson

•

5th Grade

37 questions

{HM2}-Tin5. Bài 10. Cấu trúc rẽ nhánh

Lesson

•

5th Grade

39 questions

I Will Survive (Text Structure)

Lesson

•

5th Grade

Popular Resources on Wayground

8 questions

Spartan Way - Classroom Responsible

Quiz

•

9th - 12th Grade

15 questions

Fractions on a Number Line

Quiz

•

3rd Grade

14 questions

Boundaries & Healthy Relationships

Lesson

•

6th - 8th Grade

20 questions

Equivalent Fractions

Quiz

•

3rd Grade

3 questions

Integrity and Your Health

Lesson

•

6th - 8th Grade

25 questions

Multiplication Facts

Quiz

•

5th Grade

9 questions

FOREST Perception

Lesson

•

20 questions

Main Idea and Details

Quiz

•

5th Grade

Discover more resources for Computers

25 questions

Multiplication Facts

Quiz

•

5th Grade

20 questions

Main Idea and Details

Quiz

•

5th Grade

$Adding & Subtracting fractions with like denominators$

22 questions

Adding & Subtracting fractions with like denominators

Quiz

•

3rd - 5th Grade

10 questions

Understanding Equivalent Fractions

Interactive video

•

3rd - 5th Grade

15 questions

Rounding Decimals

Quiz

•

5th Grade

15 questions

Identifying Triangles by Sides & Angles

Quiz

•

4th - 5th Grade

12 questions

Figurative Language Review

Interactive video

•

5th Grade

10 questions

Understanding Nonverbal Communication

Interactive video

•

5th - 8th Grade