Difference between revisions of "M1 Introduction to HTML"

From CSE330 Wiki
Jump to navigationJump to search
 
(6 intermediate revisions by the same user not shown)
Line 24: Line 24:
 
In this example:
 
In this example:
  
−
* <source lang="html" enclose="none"><!DOCTYPE html></source> is the document type declaration. This tells the browser that this document is an HTML document.
+
* <source lang="html" enclose="none"><!DOCTYPE html></source> The page begins with a DOCTYPE declaration. This is a mandatory part of a web page, and it tells the browser what version of HTML to use when rendering your page. In this case, the browser should use HTML 5.
 
* The <source lang="html" enclose="none"><html></source> tag is the root of an HTML document.
 
* The <source lang="html" enclose="none"><html></source> tag is the root of an HTML document.
 
* The <source lang="html" enclose="none"><head></source> tag contains meta-information about the document. This can include the title, character set declarations, CSS style definitions, and more.
 
* The <source lang="html" enclose="none"><head></source> tag contains meta-information about the document. This can include the title, character set declarations, CSS style definitions, and more.
Line 32: Line 32:
  
 
In essence, HTML gives the webpage its basic structure and content; without it, a webpage can't exist.
 
In essence, HTML gives the webpage its basic structure and content; without it, a webpage can't exist.
 +
 +
''You can view a web page's source code in your browser; in Firefox, the keyboard shortcut is Ctrl-U (or Command-U), and in Chrome, it is Alt-Ctrl-U (or Option-Command-U).''
  
 
=== Tags ===
 
=== Tags ===
 +
 +
Tags in HTML are special words or symbols enclosed in angle brackets (< >) that define the structure and formatting of elements within a web page. They act as instructions to the web browser on how to display and interpret the content. Opening tags, such as <tagname>, mark the beginning of an element, while closing tags, like </tagname>, denote the end. Tags are like containers that hold different types of content, such as text, images, links, or other elements, and they play a crucial role in creating the structure and appearance of a webpage.
 +
 +
Here are some of the most common HTML tags you will encounter. Get to know these well. For more information on how to use a given tag, [https://developer.mozilla.org/en-US/docs/Web/HTML/Element|the MDN docs] are an incredible resource.
 +
 +
{| class="wikitable"
 +
|-
 +
! style="width:15%" | Tag
 +
! style="width:85%" | Description
 +
|-
 +
| <source lang="html" enclose="none"><html></source>
 +
| Defines the root element of an HTML document.
 +
|-
 +
| <source lang="html" enclose="none"><head></source>
 +
| Contains metadata and information about the HTML document. (docs)
 +
|-
 +
| <source lang="html" enclose="none"><title></source>
 +
| Sets the title of the document, displayed in the browser's title bar or tab. (docs)
 +
|-
 +
| <source lang="html" enclose="none"><body></source>
 +
| Represents the main content of the HTML document.
 +
|-
 +
| <source lang="html" enclose="none"><h1></source> to <source lang="html"enclose="none"><h6></source>
 +
| Defines headings of different levels, from the most important (<source lang="html" enclose="none"><h1></source>) to the least (<source lang="html" enclose="none"><h6></source>).
 +
|-
 +
| <source lang="html" enclose="none"><p></source>
 +
| Represents a paragraph of text.
 +
|-
 +
| <source lang="html" enclose="none"><a></source>
 +
| Creates a hyperlink to another web page, file, or a specific location within the same page.
 +
|-
 +
| <source lang="html" enclose="none"><img></source>
 +
| Inserts an image into the HTML document.
 +
|-
 +
| <source lang="html" enclose="none"><ul></source>
 +
| Represents an unordered list (a bulleted list).
 +
|-
 +
| <source lang="html" enclose="none"><ol></source>
 +
| Represents an ordered list (a numbered list).
 +
|-
 +
| <source lang="html" enclose="none"><li></source>
 +
| Defines an item in a list (<source lang="html" enclose="none"><ul></source> or <source lang="html" enclose="none"><ol></source>).
 +
|-
 +
| <source lang="html" enclose="none"><table></source>
 +
| Represents tabular data organized into rows and columns.
 +
|-
 +
| <source lang="html" enclose="none"><tr></source>
 +
| Defines a row within a table.
 +
|-
 +
| <source lang="html" enclose="none"><td></source>
 +
| Defines a cell within a table row (<source lang="html" enclose="none"><tr></source>).
 +
|-
 +
| <source lang="html" enclose="none"><th></source>
 +
| Defines a header cell within a table row (<source lang="html" enclose="none"><tr></source>).
 +
|-
 +
| <source lang="html" enclose="none"><div></source>
 +
| Defines a division or a container for other elements.
 +
|-
 +
| <source lang="html" enclose="none"><span></source>
 +
| Defines an inline container for a small section of HTML.
 +
|-
 +
| <source lang="html" enclose="none"><form></source>
 +
| Creates an interactive form for user input.
 +
|-
 +
| <source lang="html" enclose="none"><input></source>
 +
| Creates an input field for user data entry.
 +
|-
 +
| <source lang="html" enclose="none"><button></source>
 +
| Creates a clickable button.
 +
|-
 +
| <source lang="html" enclose="none"><textarea></source>
 +
| Creates a multiline text input field.
 +
|}
 +
 +
 +
=== Built-in Functionality ===
 +
 +
While HTML primarily focuses on structure and content, some HTML tags come with built-in functionality that extends beyond that. These tags incorporate specific behaviors or interactivity into the elements they define. For example, the <source lang="html" enclose="none"><a></source> tag creates hyperlinks, allowing users to navigate to different web pages or sections within the same page. The <source lang="html" enclose="none"><form></source> tag enables the creation of interactive forms to gather user input, and the <source lang="html" enclose="none"><input></source> tag provides various types of input fields like text boxes or checkboxes.
 +
 +
To learn about less common tags with fun built-in functionality, see the optional reading, [[M1 HTML Extended|HTML Extended]]. I also encourage you to spend some time exploring [https://developer.mozilla.org/en-US/docs/Web/HTML/Element|the MDN docs].
 +
 +
=== Default Styling ===
 +
 +
When rendering HTML documents, web browsers apply default styles to each HTML element. These default styles determine how the elements are displayed visually, such as their font, color, size, spacing, and positioning. However, it's important to note that default styles may vary slightly between different browsers.
 +
 +
Browsers have their own predefined stylesheets, often referred to as user agent stylesheets, which dictate the initial appearance of HTML elements. This means that even without explicitly applying any styles, elements will still have some visual presentation based on these default styles.
 +
 +
See [M1 Introduction to CSS|Introduction to CSS] for a guide to styling elements.
 +
 +
=== Nodes ===
 +
 +
Where a tag is a syntax used in HTML to define elements, a node is a conceptual representation of an element within the Document Object Model (DOM) hierarchy. In simpler terms, a tag is the markup language used to define an element, whereas a node is an object that represents that element within the structured model of the HTML document.
 +
 +
Nodes form a hierarchical structure known as the Document Object Model (DOM). The DOM represents the HTML document as a tree-like structure, where each node has a relationship with its parent, children, and siblings. The topmost node in the DOM is the document node, representing the entire HTML document.
 +
 +
Here are the main types of nodes commonly encountered in HTML:
 +
 +
==== Element Nodes ====
 +
 +
These nodes represent HTML elements and are the most common type. They correspond to the opening and closing tags of an HTML element. For example, <source lang="html" enclose="none"><div>...</div></source>, <source lang="html" enclose="none"><p>...</p></source>, <source lang="html" enclose="none"><h1>...</h1></source> are all element nodes. Element nodes can contain child nodes, such as other elements, text nodes, or comment nodes.
 +
 +
==== Text Nodes ====
 +
 +
Text nodes represent the textual content within an HTML element. They can contain plain text, including spaces, line breaks, or any other characters. For instance, in the element
 +
 +
<source lang="html"><p>Hello, <strong>world!</strong></p></source>
 +
 +
the text node would contain "Hello," and "world!".
 +
 +
==== Attribute Nodes ====
 +
 +
These nodes represent the attributes of an HTML element. An element can have multiple attributes like id, class, src, etc. Attribute nodes contain the name and value of the attribute. For example, in the element
 +
 +
<source lang="html"><img src="image.jpg" alt="An image" /></source>
 +
 +
the `src` and `alt` attributes would be represented as attribute nodes.
 +
 +
==== Comment Nodes ====
 +
 +
Comment nodes represent HTML comments within the document. They are used to add explanatory or descriptive notes that are not displayed in the rendered output. Comment nodes start with <source lang="html" enclose="none"><!--</source>and end with <source lang="html" enclose="none">--></source>. For example:
 +
 +
<source lang="html"><!-- This is a comment --></source>
 +
 +
 +
=== The High School Analogy ===
 +
In more ways than not, HTML can be thought of as a markup language for five-paragraph essays that you wrote in history class in high school. <source lang="html" enclose="none"><blockquote></source> is used to denote long quotations; <source lang="html" enclose="none"><h1></source> through <source lang="html" enclose="none"><h6></source> denote the outline; <source lang="html" enclose="none"><p></source> denotes new paragraphs; <source lang="html" enclose="none"><figure></source> and <source lang="html" enclose="none"><figcaption></source> represent exhibits; <source lang="html" enclose="none"><section></source> could represent chapters if you were writing a longer report; and so on.
 +
Take home message: HTML defines the content of your page. Use it to its full ability.

Latest revision as of 01:20, 5 August 2023

HTML

HTML?

HTML, which stands for HyperText Markup Language, is the standard language used to create webpages. It describes the structure and content of a webpage. HTML uses a system of tags and attributes to define elements on the page. These elements can be things like headings, paragraphs, links, images, lists, tables, forms, and many more. Each of these elements has a specific tag that describes what it is and helps the browser know how to display it.

Here's a very basic example: 

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Website!</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>

Image will go here

In this example:

  • <!DOCTYPE html> The page begins with a DOCTYPE declaration. This is a mandatory part of a web page, and it tells the browser what version of HTML to use when rendering your page. In this case, the browser should use HTML 5.
  • The <html> tag is the root of an HTML document.
  • The <head> tag contains meta-information about the document. This can include the title, character set declarations, CSS style definitions, and more.
  • The <title> tag is the title of the document and is displayed in the browser's title bar or tab.
  • The <body> tag contains the content of the document, such as text, hyperlinks, images, tables, lists, etc. When you visit a website, the content you see is rendered in the body.
  • The <h1> tag defines a top-level heading, and the <p> tag defines a paragraph.

In essence, HTML gives the webpage its basic structure and content; without it, a webpage can't exist.

You can view a web page's source code in your browser; in Firefox, the keyboard shortcut is Ctrl-U (or Command-U), and in Chrome, it is Alt-Ctrl-U (or Option-Command-U).

Tags

Tags in HTML are special words or symbols enclosed in angle brackets (< >) that define the structure and formatting of elements within a web page. They act as instructions to the web browser on how to display and interpret the content. Opening tags, such as <tagname>, mark the beginning of an element, while closing tags, like </tagname>, denote the end. Tags are like containers that hold different types of content, such as text, images, links, or other elements, and they play a crucial role in creating the structure and appearance of a webpage.

Here are some of the most common HTML tags you will encounter. Get to know these well. For more information on how to use a given tag, MDN docs are an incredible resource.

Tag Description
<html> Defines the root element of an HTML document.
<head> Contains metadata and information about the HTML document. (docs)
<title> Sets the title of the document, displayed in the browser's title bar or tab. (docs)
<body> Represents the main content of the HTML document.
<h1> to <h6> Defines headings of different levels, from the most important (<h1>) to the least (<h6>).
<p> Represents a paragraph of text.
<a> Creates a hyperlink to another web page, file, or a specific location within the same page.
<img> Inserts an image into the HTML document.
<ul> Represents an unordered list (a bulleted list).
<ol> Represents an ordered list (a numbered list).
<li> Defines an item in a list (<ul> or <ol>).
<table> Represents tabular data organized into rows and columns.
<tr> Defines a row within a table.
<td> Defines a cell within a table row (<tr>).
<th> Defines a header cell within a table row (<tr>).
<div> Defines a division or a container for other elements.
<span> Defines an inline container for a small section of HTML.
<form> Creates an interactive form for user input.
<input> Creates an input field for user data entry.
<button> Creates a clickable button.
<textarea> Creates a multiline text input field.


Built-in Functionality

While HTML primarily focuses on structure and content, some HTML tags come with built-in functionality that extends beyond that. These tags incorporate specific behaviors or interactivity into the elements they define. For example, the <a> tag creates hyperlinks, allowing users to navigate to different web pages or sections within the same page. The <form> tag enables the creation of interactive forms to gather user input, and the <input> tag provides various types of input fields like text boxes or checkboxes.

To learn about less common tags with fun built-in functionality, see the optional reading, HTML Extended. I also encourage you to spend some time exploring MDN docs.

Default Styling

When rendering HTML documents, web browsers apply default styles to each HTML element. These default styles determine how the elements are displayed visually, such as their font, color, size, spacing, and positioning. However, it's important to note that default styles may vary slightly between different browsers.

Browsers have their own predefined stylesheets, often referred to as user agent stylesheets, which dictate the initial appearance of HTML elements. This means that even without explicitly applying any styles, elements will still have some visual presentation based on these default styles.

See [M1 Introduction to CSS|Introduction to CSS] for a guide to styling elements.

Nodes

Where a tag is a syntax used in HTML to define elements, a node is a conceptual representation of an element within the Document Object Model (DOM) hierarchy. In simpler terms, a tag is the markup language used to define an element, whereas a node is an object that represents that element within the structured model of the HTML document.

Nodes form a hierarchical structure known as the Document Object Model (DOM). The DOM represents the HTML document as a tree-like structure, where each node has a relationship with its parent, children, and siblings. The topmost node in the DOM is the document node, representing the entire HTML document.

Here are the main types of nodes commonly encountered in HTML:

Element Nodes

These nodes represent HTML elements and are the most common type. They correspond to the opening and closing tags of an HTML element. For example, <div>...</div>, <p>...</p>, <h1>...</h1> are all element nodes. Element nodes can contain child nodes, such as other elements, text nodes, or comment nodes.

Text Nodes

Text nodes represent the textual content within an HTML element. They can contain plain text, including spaces, line breaks, or any other characters. For instance, in the element 

<p>Hello, <strong>world!</strong></p>

the text node would contain "Hello," and "world!".

Attribute Nodes

These nodes represent the attributes of an HTML element. An element can have multiple attributes like id, class, src, etc. Attribute nodes contain the name and value of the attribute. For example, in the element 

<img src="image.jpg" alt="An image" />

the `src` and `alt` attributes would be represented as attribute nodes.

Comment Nodes

Comment nodes represent HTML comments within the document. They are used to add explanatory or descriptive notes that are not displayed in the rendered output. Comment nodes start with <!--and end with -->. For example: 

<!-- This is a comment -->


The High School Analogy

In more ways than not, HTML can be thought of as a markup language for five-paragraph essays that you wrote in history class in high school. <blockquote> is used to denote long quotations; <h1> through <h6> denote the outline; <p> denotes new paragraphs; <figure> and <figcaption> represent exhibits; <section> could represent chapters if you were writing a longer report; and so on. Take home message: HTML defines the content of your page. Use it to its full ability.

Retrieved from "http://classes.engineering.wustl.edu/cse330/index.php?title=M1_Introduction_to_HTML&oldid=2884"