My First Website!

HTML Introduction

HTML is the standard markup language for creating Web pages.

What is HTML?

• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as «this is a heading», «this is a paragraph», «this is a link», etc.

A Simple HTML Document

Example

My First Heading

My first paragraph.

Example Explained

• The declaration defines that this document is an HTML5 document
• The element is the root element of an HTML page
• The element contains meta information about the HTML page
• The element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
• The element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
• The element defines a large heading
• The

  element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

The HTML element is everything from the start tag to the end tag:

Note: Some HTML elements have no content (like the
element). These elements are called empty elements. Empty elements do not have an end tag!

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document:

HTML Page Structure

Below is a visualization of an HTML page structure:

This is a heading

This is another paragraph.

Note: The content inside the section will be displayed in a browser. The content inside the element will be shown in the browser’s title bar or in the page’s tab.

HTML History

Since the early days of the World Wide Web, there have been many versions of HTML:

Year	Version
1989	Tim Berners-Lee invented www
1991	Tim Berners-Lee invented HTML
1993	Dave Raggett drafted HTML+
1995	HTML Working Group defined HTML 2.0
1997	W3C Recommendation: HTML 3.2
1999	W3C Recommendation: HTML 4.01
2000	W3C Recommendation: XHTML 1.0
2008	WHATWG HTML5 First Public Draft
2012	WHATWG HTML5 Living Standard
2014	W3C Recommendation: HTML5
2016	W3C Candidate Recommendation: HTML 5.1
2017	W3C Recommendation: HTML5.1 2nd Edition
2017	W3C Recommendation: HTML5.2

This tutorial follows the latest HTML5 standard.

Источник

HTML for Beginners

This article will teach you the basics of HTML. I also created a 45-minute video course on the freeCodeCamp.org YouTube channel that teaches you HTML in the context of creating an actual web page.

If you are just learning HTML, I recommend both reading this article and watching the video course.

HTML stands for Hyper Text Markup Language. Every website on the internet uses HTML & CSS. Most also use JavaScript.

In a website, HTML is the structure, CSS is the style, and JavaScript is the functionality.

Here is a great interactive diagram from codeanalagies.com. Move the slider back and forth.

You can actually see the HTML that makes up any element on a webpage by right-clicking an element and then selecting «Inspect».

HTML Structure

Here is the HTML that makes up a very basic webpage:

     
This is an amazing website!
 

Let’s break things down even more.

Elements

HTML is made up of HTML elements. An element is an individual component of HTML.

Here is an HTML element from the code above:

This is an amazing website!

Tags

HTML tags mark the beginning and end of an element (and are considered part of the element). Tags are containers. They tell you something about the content between the opening & closing tags.

In the element above, the tags are

(opening tag) and

(closing tag). You will notice that the closing tag has a / . This particular tag is a p aragraph tag. It specifies a paragraph in the HTML document. The words between the opening and closing tags are a paragraph.

Kinds of Elements

Elements can be either container elements (they hold content) or stand-alone elements, sometimes called self-closing elements.

Paragraph elements are containers:

Hi, I contain content

Image elements are stand-alone:

Notice in the stand-alone img element, there is no closing tag but there is a / before the final angle bracket.

Attributes

Attributes provide additional information about HTML elements. Attribute tags include class , id , style , lang , and src (source).

Here is an example of an HTML element with the attribute tag id :

This is an amazing website!

Some things to note about attributes:

• Attributes are positioned inside the opening tag, before the right bracket.
• Attributes are paired with values (in this example, the value is info ).
• Key / value pairs are an important concept in programming.
• Attributes are selected from a pre-defined set of possible attributes depending on the element.
• Values are assigned to attributes and they must be contained inside quotation marks.

Here is another example of an element with at attribute:

Nesting

HTML elements ‘nest’ inside of one another. The element that opens first closes last.

When nesting elements, spaces and tabs are often used to show the level of nesting. However, the spacing is not required and is only used to make HTML easier to read for humans.

Here is an example of some HTML with a few levels of nesting elements:

Common HTML Tags

Here are some common tags that are in almost all HTML documents.

doctype : This is the first element on every HTML page. It tells the browser to expect HTML and what version to use. For the newest version of HTML, the element should look like this:

html : After the doctype, all page content must be contained in the tags.

head : This element contains the page title and metadata.

body : This element contains all the visible content in a page.

title : This optional element is the name of your page. It is always nested in the head tag.

div : This tag is one of the most used tags. It is used to create a basic container of other HTML or content.

p : A paragraph or section of body copy.

h1 — h6 : These designate different levels of headings or titles.

ol : Creates an ordered (numbered) list.

ul : Creates an unordered list.

Links

Anchor elements ( ) are used to link to other sites on the web or within your project.

This element links to another website:

This element links to another page of your website:

The element is a different type of link. Unlike the anchor element, it specifies relationships between the current document and an external resource.

It is often used to link a CSS file with an HTML file so that the external CSS file is used to style the HTML.

Comments

Like any other good coding language, HTML offers comments. They operate like comments in any other language. They are ignored by the browser engine.

Tables

Tables are a way to represent complex information in a grid format. They are made of rows and columns.

Tables are compound elements (similar to lists) they are made up of several elements.

th : Table header cell (optional).

Here is an example of a table. First you will see the HTML. Then you will see how the HTML displays.

 
 
Firstname
 
Lastname
 
Favorite Animal
 
 
Beau
 
Carnes
 
cow
 
 
Quincy
 
Larson
 
dog
 
 

Trivia time!

2. What is wrong with this code?

  The best site ever!! 
Check out this great content.
  

3. What is wrong with this code?

Conclusion

You’ve now learned the basics of HTML syntax.

Next you should watch this HTML crash course I created that teaches HTML in the context of building a simple web page.

After you learn HTML, you should learn CSS and JavaScript. I have also created courses on those topics. You can watch them next:

Источник

HTML Tutorial

In this HTML tutorial, whether you’re a beginner or a professional, this tutorial covers everything you need to know to learn HTML, from the basics to advanced. Providing step-by-step instructions for easy learning, it will help you become proficient in HTML.

HTML stands for HyperText Markup Language. It is used to design the web pages. With the help of HTML, you can create a complete website structure. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages and markup language defines the text document within the tag that define the structure of web pages.

Why HTML is used?

HTML is used to create the structure of web pages and website that are displayed on the Internet. HTML basically contains Tags and Attributes that are used to design the web pages. Also, we can link multiple pages using Hyperlinks.

HTML Basic Structure of Web Page

The basic structure of an HTML page is laid out below. It contains the essential building-block elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which all web pages are created.

HTML Basic Tags

Example: This is the basic example of HTML that display the heading and paragraph content.

HTML

         
Welcome to GeeksforGeeks
 
A computer science portal for geeks
   

Complete References

HTML Interview Questions

HTML Practice Quiz Sets

HTML Cheat Sheet

HTML Cheat Sheet is a simple, and quick reference list of basic HTML elements and attributes. The purpose of this Cheat Sheet is to provide you with some quick accurate ready-to-use code snippets and necessary HTML tags and attributes.

HTML Examples

HTML examples contains a wide collection of HTML programming examples. The HTML examples are categorized based on the topics including hyperlinks, forms, tables, frames, and many more.

Learn more about HTML

• Introduction
• HTML5 Introduction
• HTML Hex Color Codes
• HTML Charsets
• HTML URL Encoding
• Most commonly used HTML tags
• Structure of HTML Document
• HTML Form Design
• Design your First Website in Just 1 Week
• Simple Portfolio Website Design
• Design a Portfolio Gallery
• Design a web page
• Top 10 Projects For Beginners
• 10 Best HTML Coding Practices You Must Know
• Design a Login Form to an Image using HTML and CSS

Источник