Web belt by Code Ninjas

What is HTML?

cnbromleytab — 2023-03-01 15:18:40 UTC

Hyper Text Markup Language, (HTML), is how we make the structure of every single website on the World Wide Web.

HTML creates elements.

cnbromleytab — 2023-03-01 15:23:13 UTC

An element consists of tags and content. The element name above would be p, as it is what is inside the <>. In most cases, we have a start tag and a closing tag. Closing tags always have a forward slash (/).

⚠ Some elements do not have a closing tag.

cnbromleytab — 2023-03-01 15:29:25 UTC

Some elements, known as empty elements, do not have a closing tag. They can (but do not have to) include a forward slash at the end. Examples include:

: The Line Break element.
: The Thematic Break (Horizontal Rule) element.
: The Image element.

Elements can have Attributes!

cnbromleytab — 2023-03-01 15:36:09 UTC

In the opening tag you might find something called an attribute! There are some which have in-built functionality, like src, href, class, style and id - but you can also define your own. A full list of attributes that have purposes can be found here!

The head and body elements.

cnbromleytab — 2023-03-01 15:44:02 UTC

A HTML document can be split into the head and body.

The <head> defines something called metadata - which is data (information) about the website itself. It can be about what the website is called, what the website is about, keywords, and other files that are connected to the website too! It is what the computer reads to understand what the website is.

The <body> defines what you actually see and interact with. If you go on any website, you are looking at what is written inside the .

🚩CHECKPOINT!

cnbromleytab — 2023-03-01 15:46:17 UTC

1. What does HTML stand for?
2. Metadata is defined in the _____ element.
3. Attributes are written in the closing tag. True or False?
4. Name one empty element!

Tell a sensei your answers before moving on.

Declaring a HTML document...

cnbromleytab — 2023-03-01 15:56:11 UTC

All HTML websites should start with .

This is not a tag, but something we call a declaration. It 'declares' to the browser that we are going to be using HTML5, which is the most recent version of HTML.

is not case-sensitive, which means we can write it as , , and the computer will still understand.

OPTIONAL: The HTML tag

cnbromleytab — 2023-03-01 16:12:21 UTC

It is good practice to use <html>html> as a container for all elements. It is not mandatory, but we use the tag usually for two reasons; the first of which is accessibility;

tells the computer that the language of our website is english, so that if anyone is using a screenreader (or something else that reads the contents of a website automatically) it knows how to do it correctly!
The second reason is that it creates a 'root' element- which is one single element that everything else is inside of. It makes the computer have an easier time navigating the elements.

The tag goes after the declaration, but wraps around everything else in the document.

Parents, Children and Siblings.

cnbromleytab — 2023-03-01 16:20:06 UTC

Elements can be categorized into parent, child and sibling elements. They can even be multiple at once!

A parent is any element whose tags wraps around another element.
A child is any element that is inside of another element.
A sibling is any element that is next to another element.

In the image above, body is a parent element, h1 and p are child elements. h1 and p are also sibling elements to each other.

Text Elements!

cnbromleytab — 2023-03-01 17:01:47 UTC

This is the biggest heading
The first heading element! This is the biggest, most important text on the page. You can use h1, h2, h3, h4, h5 and h6, which all get smaller.

Hello World
The paragraph element! This defines a paragraph on the page. It is for text only.

^{This is superscript}
The superscript element makes text smaller, and a bit ^aboveeverything else!

_{This is subscript}
The subscript element makes text smaller, and a bit _Beloweverything else!

This text is emphasized
The emphasis tags make the text within them usually in italics (though different browsers have different ways to display it! Some also make it bold.)

This text is strong
The strong tags make the text within them usually in italics (though different browsers have different ways to display it! Some also make it italic.)

~~This text has been deleted~~
The deleted element is for showing information that has later changed. It is usually represented by browsers with a ~~strikethrough~~.

This text has been inserted
The inserted element is for showing information that has replaced something else. Browsers usually underline it.

This text is marked!
The marked element highlights whatever is inside of it!

🚩CHECKPOINT!

cnbromleytab — 2023-03-01 17:06:32 UTC

1. How many tags are there?
2. is not a tag; what is it?
3. as well as all tags are case sensitive. True or False?
4. What does the tag do to text?

Tell a sensei your answers before moving on.

Adding images in HTML!

cnbromleytab — 2023-03-01 17:28:47 UTC

HTML uses a tag called <img> to embed image elements. is an example of the empty elements we mentioned earlier!

In order for to work, the attribute src (source); is neccessary. This calls on the source image!
all attributes follow the pattern of:
name="attribute value"
and is written inside the opening tag.
So writting a source attribute would look like:
src="image.png"

As we are using JSbin to write our code, we cannot call on local images, so "image.png" would not do- but we have an alternative!
If you find an image on the internet and right-click it, you get the option to "Copy image address". By pasting this value into the speech marks, you can use that image on your website!

There are also other attributes for images.

width="100"
Width defines the width of the image in pixels.

height="150"
Height defines the height of the image in pixels.

alt="An image of an apple"
Alt or Alternate text allows for screenreaders to read out what the image is- as well as allows for people to know what the image is supposed to be in the event that the original imahe you linked has been taken down. It is good practice to use an alt attribute.

Adding links in HTML!

cnbromleytab — 2023-03-01 18:01:38 UTC

Links (hyperlinks) are the basis of the world wide web! You have to use hyperlinks to access other pages of your own website, as well as other websites too!
The tag we use for adding a link is:
This is a link... but it doesnt go anywhere!
This creates an anchor element!
But it cant do anything without a hyperlink reference. This is where our attribute- href - comes in.
href="https://url.com"
by placing the attribute in the opening tag, you have turned the text inside the tags into a functional hyperlink.

JSbin

cnbromleytab — 2023-03-01 18:04:40 UTC

We are going to be using JSbin to work on our websites. It sets you up with some basic HTML which we call a boilerplate.
It will be a little different from creating a website using a text editor, as you dont have to use tags to link the CSS or Javascript, but thats for later on.

END OF TOPIC KAHOOT!

cnbromleytab — 2023-03-01 18:05:46 UTC