Category Archives: HTML

HTML is a major Web technology that defines the structure of a webpage.

How to start HTML ?

html-intro

Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).

We believe using a simple text editor is a good way to learn HTML.

Follow the four steps below to create your first web page with Notepad or TextEdit.

Step 1: Open Notepad (PC)

Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad.

Step 1: Open TextEdit (Mac)

Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files correctly. In Preferences > Format > choose “Plain Text”

Then under “Open and Save”, check the box that says “Ignore rich text commands in HTML files”.

Step 2: Write Some HTML

Write or copy some HTML into Notepad.


<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

img_notepad

Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file “index.htm” and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

 

img_saveas

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click – and choose “Open with”).

The result will look much like this:

img_chrome

HTML main tag

 

<html>
<head>
<style type="text/css">
header, article, footer, main, nav {border:1px solid orange;padding:3px;width:50%;} 
</style>
</head>
<body>
<header>Header...</header>
<main>
Main...
<article>Article...</article>
</main>
<footer>Footer...
<nav>Nav...</nav>
</footer>
</body>
</html>

Eg. :

Header…

Main…

Article…

Footer…

 

HTML link tag

 

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<h1>I am formatted with a linked style sheet</h1>
<p>Me too!</p>
</body>

</html>

Eg.

I am formatted with a linked style sheet

Me too!

 

 

HTML legend tag

 

<input type="text" style="width:120px;" /></p>
<p>Preferred Name: <input type="text" style="width:120px;"></p>
</fieldset>
<fieldset>
<legend>Gender</legend>
<input type="radio" name="gender" value="male" /> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other" /> Other
</fieldset>

Eg. :

Preferred Name:

Gender

Male
Female
Other