WELCOME TO HTML, CSS AND JavaScript

HTML - HyperText Markup Language

CSS - Cascading Style Sheets

These three are core subjects of web design and they are courses in Frontend engineering. Frontend
engineering involves being able to designs into websites, mobile apps and web apps.

What is HTML, CSS, AND JavaScript?

HTML the markup language used to define the content we displayed on a web page, which include
paragraphs, images, titles, headers, etc.

CSS is used to define the appearance of the content we create with HTML. For instance underlining a
paragraph, centre an object etc.

JavaScript is the programming language for the web. It is used to add interactivity to our web application
or website.

For instance, let's say we have a form defined by HTML, and then we centre the form with CSS and then
we collect the data entered into the form (say name, age, email etc) using JavaScript.

HOW THE WEB WORKS

Note two things:

Client: This is basically the browser you use to type the resource and request for it.

Web Server: This is where this particular website or web page you are trying to locate is located or
stored.

The link or address typed in the browser is a uniform resource locator (URL); URL is used to locate or
request for resources on the internet. Each url points to unique resource.

Resources requested by a browser using a url could be:

- Web pages (HTML documents)

- Images

- Fonts, video, audio files.

HTTP(S): - Hypertext Transfer Protocol (Secure) is the messaging language that the client and the server
use to communicate.

Document object model (DOM) is the collection of all the contents inside a web page.

In essence, the browser is what constructs a page for you.

Tim Berners-Lee invented the Web in 1989 with HTML as its publishing language. Tue language has since
evolved from its version 1.0 with limited tags and capabilities to now HTML5 with more abilities.

Basics of HTML:

- Anatomy of HTML Element

- Nesting Elements

- Empty Elements

- Anatomy of an HTML Document

- Images

- Comments

- Links

- Marking up text

- Forms

- Tables

HTML BASICS

HTML Elements are used to display contents in an HTML page. The HTML Elements are: <p> </p>.
Hence, assuming we want to display the paragraph " Hello HTML " (without the quotes), so we'll use the
paragraph element (P element) as: <p> Hello HTML </p>

Anatomy of HTML Element

<p class="text">My name is Baye</p>

The opening tag dictates the start and the end of the content you want to display.

Attributes are additional things inside the HTML element. It has a class with the attribute name, an equal
sign and a value, which is the text.

Attributes contain extra information about the element that you don't want to appear in the actual
content which is placed in the opening tag. In the example above, "class" is the attribute name and
"text" is the attribute value.

Properties of an Attribute

<img src="images/icon.png" alt="Text" />

<div id="edit_note">Test text 2< /div>

We have 3 elements shown above. In the first one, we have an image (img) element which we use to
grab and showcase an image in an HTML page. It has 2 attributes; the source (src), the other attribute
being alt (alternative) and it is used to show show what message you want to display in case the image
doesn't load.

The second element is a paragraph tag element. It has a class which has two values (edit text and color)
separated by a space. Hence, when a paragraph element has more than one values, you separate them
with space.

The third attribute is id (identification). Here, if we have say 10 different div elements, each of them will
have a different ID, since it is a unique identifier. Note that for class, we can have different elements
having the same class name or class value but for id it's unique so each element will have a unique id.

Hence, not that an attribute has a value and a name and also, they are defined in the opening tag of an
HTML element.

SELF CLOSING TAGS

In HTML, a tag is used for creating an element.

<p>My name is Baye</p>

There are some tags that aren't required to have specific closing tags, example is a line break or an
image tag.

<br/>

<IMG src="images/your-icon.png" alt="Test image"/>

In an image element for instance, we don't want to display the content in between the html element
(the image element), but rather, we just want to locate where this particular element is and under the
hood the image element is displayed. The reason for this is because most of the time the content we
display between html elements is usually written content.

NESTING ELEMENTS, EMPTY ELEMENTS AND ANATOMY OF AN HTML DOCUMENT

Nesting in html is putting elements inside other elements. See example below:

<section>

<p>Alt School</p>

<p>Learn coding here</p>

In the example above, we have a section element that has two paragraph elements within it.

Empty elements are elements without any content. E.g.

<IMG src="images/icon.png"alt="Test"/>

Above example is an image element that has no content within it. What it does is to help us display an
image under the hood inside an html page. It has only one tag, the opening tag (the image), hence it's s
self closing tag.

In essence, we use tags to construct an html element, and html elements can be nested together inside
a section element to get different content and putting all these together at the end we get an html
document which is displayed in a web browser.

Anatomy of an HTML Document

< ! DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewpoint"

content="width=device-width, initial-scale=1.0" />

<title>My First Web Page</title>

</head>

<body>

<p>My first web page! < /p>

< /body>

</html>

The element "DOCTYPE" asserts to the browser that this is an html element or document or page.
Following it, we have an html element, called the root element which has an opening tag and a closing
tag at the bottom. Inside it, immediately after the html element we have the head tag, and inside head
tag we put contents about attributes or more information about an html page and contents of this head
tag are not displayed in the web page, but just has information about that particular web page. Contents
of the head tag might include title and so on. Next, we have the body tag and this is where the content
that will be displayed in the html page is nested. Here you can add the paragraphs, footers, headers,
images, audios, videos, nest sections and so on.

INSTALLING PRE-REQUISITE TOOLS

- VS Code Editor: code.visualstudio.com/download

- Prettier Code Formatter Extension

- Live Server Extension

- Google Chrome

LET'S BUILD OUR FIRST HTML DOCUMENT