[HTML] Getting started part #1

Mexicano

El Patrón
Aug 14, 2013
363
175
HTML Getting Started Part #1
Hi Devbest, today im gonna share with you guys a nice tutorial i found for people that wanna learn more about HTML. ENJOY!
------------------------------------------------------------------------------------------------------------------------------------------------------

HTML:
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

  • The DOCTYPE declaration defines the document type
  • The text between <html> and </html> describes the web page
  • The text between <body> and </body> is the visible page content
  • The text between <h1> and </h1> is displayed as a heading
  • The text between <p> and </p> is displayed as a paragraph
------------------------------------------------------------------------------------------------------------------------------------------------------
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 containHTML tags and plain text
  • HTML documents are also called web pages
------------------------------------------------------------------------------------------------------------------------------------------------------
HTML Tags
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
Example:
HTML:
<tagname>content</tagname>

------------------------------------------------------------------------------------------------------------------------------------------------------

HTML Elements
"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:

HTML:
<p>This is a paragraph.</p>

------------------------------------------------------------------------------------------------------------------------------------------------------

Web Browsers
The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages.

The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be presented/displayed to the user:

pic_ie.jpg


------------------------------------------------------------------------------------------------------------------------------------------------------

HTML Page Structure
Below is a visualization of an HTML page structure:

HTML:
<html>
<body>
<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body></html>

------------------------------------------------------------------------------------------------------------------------------------------------------

HTML Versions
Since the early days of the web, there have been many versions of HTML:

Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2012

------------------------------------------------------------------------------------------------------------------------------------------------------
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.

------------------------------------------------------------------------------------------------------------------------------------------------------

Common Declarations

HTML5
HTML:
<!DOCTYPE html>
HTML 4.01

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

------------------------------------------------------------------------------------------------------------------------------------------------------

Have a nice day! (Im gonna put part #2 tommorow). -Hooterz


 

Sysode

Front-End Developer
Dec 11, 2012
1,673
848
Mind leaving credit to the person who actually took their own time to write this tutorial for others? You said you found it, so why not give them some credit?
 

Sysode

Front-End Developer
Dec 11, 2012
1,673
848
How I learn't to code was by CodeAcademy and it'll stay that way ;)
It's each to their own, I guess. Everyone learns in a different way, it's all about finding out which is the most efficient for you. Personally, I find CodeCademy annoying as I learn everything through the little walkthrough they provide but then it just goes.
 

Users who are viewing this thread

Top