Tim Berners Lee - invented HTML
Hypertext - a text that contains references (links) to other texts that viewers can access immediately
1991 - Tim Berners Lee published the first version of HTML
18 HTML tags - tags that consist in the first version of HTML
140 HTML tags - the current number of tags according to Mozilla Developer Network’s HTML Element
Reference
HTML - now considered an official web standard
HTML specifications - maintained and developed by the World Wide Web Consortium (W3C)
2014 - introduction of HTML
Block-level & Inline tags - the most used HTML tags
Block-level elements - take up the full available space and always start a new line in the document.
Example of Block-level tags:
Headings & Paragraphs
Inline elements - only take up as many new lines on the page.
Example of Inline tags:
Links & Emphasized strings
<html>, <head>, and <body> - three block level tags every HTML document need to contain
<html></html> tag - the highest level element that encloses every HTML page
<head></head> tag - holds meta information such as the page’s title and charset
<body></body> tag - encloses all the content that appears on the page
6 levels - the levels the headings have in HTML, range from <h1></h1> to <h6></h6>
H1 - the highest level heading
H6 - the lowest level heading
<p></p> tag - enclosed paragraphs
<blockquote></blockqoute> tag - enclosed blockquotes
Divisions - are bigger content sections that typically contain several paragraphs, images, sometimes
blockquotes, and other smaller elements.
<div></div> - used to mark up divisions
- A dive element can contain another div tag inside it as well.
<ol></ol> - used for ordered list
<ul></ul> - used for unordered ones
<li></li> - used to enclosed for individual list
A basic unordered list looks like this in HTML:
<ul>
<li> List item 1 </li>
<li> List item 2 </li>
<li> List item 3</li>
</ul>
- Many inline tags are used to format text, for example, a <strong></strong> tag would render
an element in bold, whereas <em></em> tags would show it in italics.
- Hyperlinks are also inline elements that require <a></a> and href attributes to indicate the
link’s destination: <a href-https://example.com/”>Click me!</a>
- Images are inline elements too. You can add one using <img> without any closing tag. But you
will also need to use the src attribute to specify the image path, for example:
<img src=”/images/example.jpg” alt” Example image”>
HTML strengths and limitations:
Pros:
- A widely used language with a lot of resources and a huge community behind
- Runs natively in every web browser
- Comes with a flat learning curve
- Open-source and completely free
- Clean and consistent markup
- The official web standards are maintained by the World Wide Web Consortium (W3C)
- Easily integrable with backend languages such as PHP and Node.js
Cons:
- Mostly used for static web pages. For dynamic functionality, you may need to use Javascript
or a backend language such as PHP
- It does not allow the user to implement logic. As a result, all web pages need to be created
separately, even if they use the same elements. E.g. headers and footers.
- Some browsers adopt new features slowly
- Browser behavior is sometimes hard to predict (e.g. older browsers don’t always render
newer tags).
How are HTML, CSS, and JavaScript related?
HTML works extremely well with two other frontend languages: CSS (Cascading Style Sheets), and
Javascript. Together, they can achieve a rich user experience and implement advanced functions.
CSS - responsible for stylings such as background, colors, layouts, spacing, and animations.
JavaScript - lets you add dynamic functionality such as sliders, pop-ups, and photo galleries.
HTML - as a naked person
CSS - as the clothing
Javascript - as movements and manner
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.
HTML - is the main markup language of the web. It runs natively in every browser and is maintained by
the World Wide Web Consortium.
Web Browsers - the purpose of a web browser 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.
Anatomy of a URL
The Web is made up of billions of resources, each of them linkable. A resource’s exact location is the key
to linking to it. Without an exact address (a Uniform Resource Locator, or URL), you can’t use the
Address bar in a Web browser to visit a Web page directly.
URL Components:
Protocol - specifies the protocol the browser follows to request the file. The Web page protocol is
http:// (the usual start to most URLs)
Domain - points to the general Web site (such as www.sum.com) where the file resides. A domain may
host a few files (like a personal Web site) or millions of files (like a corporate site, such as
www.sum.com)
Path - names the sequence of folders through which you must navigate to get to a specific file. For
example, to get to a file in the evangcentral folder that resides in the developer’s folder, you use the
/developers/evangcentral/path
Filename - specifies which file in a directory path the browser accesses
