Let’s Start Our Class How To Edit your First Html Doc.
This article will answer about:
- What is html
- Html Tags
- Html Elements
- Html Page Structure
- The <!–DOCTYPE>
- Definition And Usage
- Tips and Info
- Notepad Editor
What is Html?
- HTML is a language for describing web pages.
- HTML stands for Hyper Text Markup Language
- HTML is a markup language
- A markup language is a set of markup tags
- The tags describe document content
- HTML documents contain HTML tags and plain text
- HTML documents are also called web pages
HTML markup tags are usually called HTML tags
- HTML tags are keywords (tag names) surrounded by angle brackets like <html>
- HTML tags normally come in pairs like <b> and </b>
- The first tag in a pair is the start tag, the second tag is the end tag
- The end tag is written like the start tag, with a forward slash before the tag name
- Start and end tags are also called opening tags and closing tags
“HTML tags” and “HTML elements” are often used to describe the same thing.
- But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags:
- HTML Element:
<p>This is a paragraph.</p>
HTML Page Structure
Below is a visualization of an HTML page structure:
<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
The <!–DOCTYPE> Declaration
The <!–DOCTYPE> declaration helps the browser to display a web page correctly.
There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML type and version used.
<!–DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
<!–DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
<title>Title of the document</title>
The content of the document……
The <!–DOCTYPE> declaration is supported in all major browsers.
Definition and Usage
- The <!–DOCTYPE> declaration must be the very first thing in your HTML document, before the tag.
- The <!–DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
- In HTML 4.01, the <!–DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
- HTML5 is not based on SGML, and therefore does not require a reference to a DTD.
Tip: Always add the <!–DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.
Differences Between HTML 4.01 and HTML5
- There are three different <!–DOCTYPE> declarations in HTML 4.01. In HTML5 there is only one:
HTML Elements and Doctypes
- Look at our table of all HTML elements, and what Doctype each element appears in.
Tips and Notes
Note: The <!DOCTYPE> tag does not have an end tag.
Tip: The declaration is NOT case sensitive.
Tip: Use W3C’s Validator to check that you have written a valid HTML / XHTML document!
Common DOCTYPE Declarations
HTML 4.01 Strict
This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
HTML 4.01 Transitional
This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
HTML 4.01 Frameset
- This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
XHTML 1.0 Strict
- This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
XHTML 1.0 Transitional
- This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
XHTML 1.0 Frameset
- This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
- This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages).
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
“Are You Ready Practice Your Writting For First Page?”
Writing HTML Using Notepad or TextEdit
HTML can be edited by using a professional HTML editor like:
Microsoft Expression Web
CoffeeCup HTML Editor
However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac). We believe using a simple text editor is a good way to learn HTML.
Follow the 4 steps below to create your first web page with Notepad.
Step 1: Start Notepad
To start Notepad go to:
Step 2: Edit Your HTML with Notepad
Type your HTML code into your Notepad:
Step 3: Save Your HTML
Select Save as.. in Notepad’s file menu.
When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.
Save the file in a folder that is easy to remember, “Mywebpage”
Step 4: Run the HTML in Your Browser
Start your web browser and open your html file from the File, Open menu, or just browse the folder and double-click your HTML file.
The result should look much like this: