Hypertext Markup Language

Tim Berners-Lee, a British scientist, invented the World Wide Web (WWW) in 1989, while working at CERN. The web was originally conceived and developed to meet the demand for automated information-sharing between scientists in universities and institutes around the world.

Let's get one thing straight before we go any further: the Web and the Internet are two totally different things:

The Internet is a worldwide network of computers, linked mostly by telephone lines; the Web is just one of many things (called applications) that can run on the Internet. When you send an email, you're using the Internet: the Net sends the words you write over telephone lines to your friends. When you chat to someone online, you're most likely using the Internet too—because it's the Net that swaps your messages back and forth. But when you update a blog or Google for information to help you write a report, you're using the Web over the Net.

The Web is the worldwide collection of text pages, digital photographs, music files, videos, and animations you can access over the Internet. What makes the Web so special (and, indeed, gives it its name) is the way all this information is connected together. The basic building blocks of the Web are pages of text, like this one—Web pages as we call them. A collection of Web pages on the same computer is called a website. Every web page (including this one!) has highlighted phrases called links (or hypertext links) all over it. Clicking one of these takes you to another page on this website or another website entirely. So far, so simple!

The Client-Server model

The client-server model is a network architecture that describes how servers share resources and interact with network devices. For modern enterprises and data centers, many servers facilitate processes like email, printing, internet connections, application hosting, and more.

The client-server model describes how network devices like workstations, laptops, and IoT devices — known as clients — make requests to network machines or software capable of completing the request, known as servers.

Though servers historically have been physical appliances like rack servers, data center trends show administrators increasingly deploy virtual servers for a range of workloads.

Most Internet services are of this client-server type. The action of visiting a website requires client-server architecture, since the web server (such as Wikipedia) serves the web pages to the browser (client). The user's computer and web browser would be considered a client. The computers, databases, and the uses that make up Wikipedia would be considered the server. When the user's web browser requests a particular Wikipedia article, the Wikipedia server collects all the information to be displayed in the Wikipedia database, articulates it on a web page, and sends it on to the client's web browser.

URLs

There was one more clever thing Berners-Lee thought of—and that was a way for any computer to locate information stored on any other computer. He suggested each web page should have something like a zip code, which he called a URL (a Universal or Uniform Resource Locator). The URL is the page address you see in the long bar at the top of your Web browser.

The address or URL of this page is:

https://www.JustinChill.com/HTML.html

URL scheme

A URL is classified by its schema, which generally indicates the network protocol used to retrieve, through the network, the information of the identified resource. A URL begins with the name of its schema, followed by a colon, followed by a specific part of the schema. You'll recognize HTTP/s, but there are many different schemas available.

Some examples of URL schemes:

• http - Hypertext Transfer Protocol (HTTP) resources.
• https - HTTP over Secure Sockets Layer (SSL).
• ftp - the File Transfer Protocol.
• mailto - email addresses.
• ldap - searches the Lightweight Directory Access Protocol (LDAP).
• file - resources available on the local system or on a local network.
• news - Usenet news groups (newsgroup).
• telnet - the Telnet protocol.
• data - the schema to insert small pieces of content into a document's data URI scheme

Web Servers

A web server is software and hardware that uses HTTP (Hypertext Transfer Protocol) and other protocols to respond to client requests made over the World Wide Web. The main job of a web server is to display website content through storing, processing and delivering webpages to users. Besides HTTP, web servers also support SMTP (Simple Mail Transfer Protocol) and FTP (File Transfer Protocol), used for email, file transfer and storage.

Web server hardware is connected to the internet and allows data to be exchanged with other connected devices, while web server software controls how a user accesses hosted files. The web server process is an example of the client/server model. All computers that host websites must have web server software.

The Frontend

The front end is what you see on the screen — menus, graphics, and other features. You’ll also see the front end called the client-side because that’s who is interacting with it. Front-end developers are primarily responsible for the site’s appearance.

A front-end developer uses code that affects how a website looks and how a user interacts with its webpages. That includes simple elements such as buttons that take a visitor to different places within the website, as well as input methods, like a contact form. The programming languages that a front-end developer uses can create a static webpage or a dynamic one. Programming languages they use include:

• HTML - hypertext markup language, tags are used that structure and organize the content of the web.

• CSS - cascading style sheets, responsible for the format and visual design of the web pages (written in html).

• Javascript - a programming language that can add dynamism to a website.

What is HTML?

HTML is the standard markup language for creating web pages.

• 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, like tables and images.
• HTML elements tell the browser how to display content.

A simple HTML document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Example explained

• The <!DOCTYPE html> declaration defines this document is an HTML5 document.
• The <html> element is the root, or first, element of an HTML page.
• The <head> element contains meta information about the HTML page.
• The <title> element specifies a title for the HTML page (which is displayed in the title bar of the browser or the page tab)
• The <body> element defines the body of the document and is generally the container for all visible elements.
• The <h1> element defines a header level one (1).
• The <p> element defines a paragraph element.

What is an HTML element?

An HTML element is defined by a start tag, some content, and an end tag. They may include attributes to offer additional information about their content.

Structure

To create a site or a web application, the first thing we must do is write the HTML code that defines the structure of each page.

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

Text and formatting

Headlines

HTML headers are titles or subtitles that you want to display on a web page.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Titles are important because search engines use titles to index the structure and content of their web pages.

Users often flip through a page for their titles. It is important to use titles to show the structure of the document.

Paragraphs

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Span

An HTML tag without any specific meaning. Commonly used together with the attributes class or id to help target elements and add unique characteristics.

<p> This is a paragraph, blah, blah, blah. </p>
<p> This is another paragraph, <span>blah, blah, blah.</span> </p>

Horizontal rules

The <hr> element is used to separate content (or define a change) in an HTML page

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

Line breaks

The <br> HTML element defines a line break. Use <br> if you want a line break (a new line) without starting a new paragraph.

<p>This is<br>a paragraph<br>with line breaks.</p>

Pre-formatted text

The <pre> HTML element defines pre-formatted text. The text within a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>

Formatting

The formatting elements were designed to display special types of text:

• <b> - The Bring Attention To element. Should not be used for styling text or signifying importance (MDN)
• <strong> - important text
• <i> - The Idiomatic Text element. Should not be used for italics (MDN).
• <em> - Text emphasized
• <mark> - Marked text
• <small> - Smaller text
• <del> - deleted text
• <ins> - inserted text
• <sub> - Subscript text
• <sup> - Superscript text

<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<small>This is some smaller text.</small>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
      

Lists

HTML lists allow web developers to group a set of related items into lists.

Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

Items in the list will be marked with bullets (small black circles) by default.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
      

Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

Items in the list will be marked with numbers by default:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Description lists

A description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term.

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

Hyperlinks

Links are found on almost all web pages. Links allow users to click to travel from one page to another.

A link does not have to be text. A link can be an image or any other HTML element!

Syntax

<a href="url">link text</a>

This example shows how to create a link to JustinChill.com:

<a href="https://www.JustinChill.com/">Visit JustinChill.com!</a>

Destination attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another destination for the link.

• _self Open the document in the same window or tab that was clicked. Default option.
• _blank Open the document in a new window or tab.
• _parent Open the document in the main frame.
• _top Open the document throughout the window.

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Link titles

The title attribute adds extra information about an element. The information is displayed when the mouse moves over the link.

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

Absolute URLs versus relative URLs

Both of the above examples use an absolute URL (a complete web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative URL (without the part "https: // www")

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

An image as link

To use an image as a link, simply place an <img> tag within a <a> tag.

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
      

Link to an email address

Use mailto: within the attribute href to create a link that will open user's default e-mail program and compose a new email.

<a href="mailto:[email protected]">Send thanks</a>

Button as a link

To use an HTML button as a link, you must add some JavaScript code.

JavaScript allows you to specify what happens in certain events, such as when a button is pressed.

<button onclick="document.location='default.asp'">HTML Tutorial</button>

Images

Images can improve the design and appearance of a web page.

<img src="monalisa.jpg" alt="Mona Lisa">

Syntax

The <img> tag is used to embed an image in a web page. The images are not technically inserted in a web page; rather, the images are linked to web pages. The label <img> creates a space on the page waiting for the reference image.

Unlike other HTML elements, the <img> tag is self-closing, and does not have a </img> closing tag.

Images saved in a folder

If you have your images in a subfolder, you must include the folder name in the src attribute.

<img src="/images/html5.gif" alt="HTML5 Icon">

Images on another server / website

To point to an image on another server, you must specify an absolute (full) URL in thesrc attribute.

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

Common image formats

These are the most common image file types, which are compatible with all browsers:

Tables

Tables allow web developers to organize data into rows and columns.

An HTML table consists of table cells within rows and columns. Each cell of the table is defined by a <td>, or table data, tag. Each row of the table start with a <tr> tag.

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Forms

Web forms are one of the main points of interaction between a user and a website or application. Forms allow users to enter data, which is usually sent to a web server for processing and storage.

The form tag defines the container for the form. It supports some specific attributes to configure the way the form behaves. All its attributes are optional, but it is best practice to always establish at least the action and method attributes:

<form action="" method="">

</form>

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

• type data that the input will receive.
• placeholder help text for the user.
• id a unique identifier.
• name the name of the input. Each input field must have a name attribute to be submitted.

<input id="course" type="text" placeholder="Name your class" name="course">

Label

Additional text that describes the input is why it has the for attribute where we enter the input id.

<label for="course">Course: </label>

Button

A button to process our form that is why it has the attribute submit

<button type="submit">Submit</button>

A complete form

<form action="receive.html" method="GET">
  <label for="course">Curso: </label>
  <input id="course" type="text" placeholder="Enter your course" name="course">
  <button type="submit">Submit</button>
</form>

Semantic HTML

The DOM

The Document Object Model, or DOM, is how a web browser represents a web page internally. The DOM determines what content should be on a page and how each element of the content relates to the other elements. Let’s look at each word of the acronym.

Document

We can think of a document as a way to structure information, including articles, books, and scientific papers. For Web Developers, a document is a name for a web page, and they consider the DOM as a model for all the stuff on the web page. The DOM calls this stuff objects.

Object

The “stuff” on web pages are objects and are sometimes called elements or nodes. Here are some objects you may run into on a web page:

• Content. The most obvious objects on a web page are the content. These can include words, videos, images, and more.
• Structural elements. These include divs, containers, and sections. You may not see these elements, but you see how they affect the visible elements because they organize those elements on the web page.
• Attributes. Every element on a web page has attributes. These include classes, styles, and sizes, for example. These are objects in the DOM, but they’re not elements like the content and structural elements.

Model

A model is a representation of something, and it helps us understand how something is put together. There are models for many things that need to be universally understood, analyzed, and used.

One example of a model being used is for instructions. Blueprints, floor plans, and IKEA directions are all examples of this kind of model. They show the object being modeled with enough detail that it can be recreated.

Another example of a model is a description. This type of model is used to simplify big ideas or complex systems so they can be understood more easily. These types of models help us to understand things like our galaxy.

The DOM is a model for web pages. It acts as a set of instructions for web browsers.