Hello! So you want to learn how to make websites. In that case you need to learn HTML!

So let's start at the very beginning. What exactly is HTML? And why do I need it?

Let's break it down from the basics, and build our way up. HTML stands for HyperText Markup Language. It uses markup to describe the structure of web pages.

The structure is built up by elements, and they are represented by tags! Tags label pieces of content such as "heading" "paragraph" "table" and so on. These tags aren't shown on the page, but are used to display content in different ways.

That's a lot to digest! So let's go into it. First let's try it together.

Don't worry about understanding, it'll all click as we work through it. We start by declaring that this is an HTML document. The <html> is the root element of any HTML page.

The <head> contains meta information about the document. The <title> element specifies a title for the document. The <body> contains the visible page content.

Finally, the <h1> defines a large heading, while <p> defines a paragraph. With everything set in the order, let's go into the explanation of how tags work. Tags typically come in pairs.

A start tag, and the end tag. The end tag is written just like the start tag, but with a forward slash inserted before the tag name. Here we've got the tag name and the forward slash tag name.

And the contents of the element in between them. So if this was a paragraph, we'd use <p> --- </p> and some text in the middle. Let's play a game.

See if we can correctly match start, and end tags, together. So what turns HTML code and elements into a viewable website? Well, that's where web browsers come in.

The purpose of a web browser, be it Chrome, Firefox, Edge, or Safari, is to read HTML documents and display them. But, the browser does not display the HTML code. Instead, it uses it, to determine how to display the document.

Let's see what kind of building blocks are hidden behind this webpage. This is a visualization of an HTML page structure. You can see the HTML, the head, with the page title below that, and then the body under that.

And that's the basics. Let's delve into this further. When you're creating and modifying web pages you can use any professional HTML editor But when you're learning HTML you should start with a simple text editor like Notepad on PCs or Text edit on Macs it's better to start simple before jumping into the deep end.

Here are 4 steps to create your first web page: Step 1 open Notepad or Text edit In this video we will use notepad. Now it's time for step 2. Write some HTML.

stretch your fingers and then either write or copy some HTML into notepad. Then comes step 3. Save your work as an HTML page.

Look at you moving along so fast. To save it select file and then Save As. Name the file "index.

html" and set the encoding to utf-8 which is the preferred encoding for all HTML files HTML files can have . html or just . htm as file extension.

And finally we reach Step 4. View the HTML page in a Browser. Open the saved HTML file in your favorite browser.

The result should look like this. And just like that you've created your first HTML page. You should feel very proud.

Now that we know how to create HTML Pages, let's see some coding in action. An HTML element usually consists of a start tag and an end tag, with the content inserted in between. The HTML element is everything from the start tag to the end tag.

For example the HTML p element defines a paragraph. So if you want a paragraph on your page write the <p> start tag add content inside and close it with the </p> end tag. This is now a HTML p element, also known as a paragraph element.

All HTML documents consist of nested HTML elements. Nested elements are elements within elements. For instance these two elements are nested within the body element, which in turn is nested within the HTML element.

Let's take a closer look at the different elements: First the HTML element defines the HTML document, it comes with a start tag and an end tag. Inside the HTML element we have the body element which defines the document body. It comes with a star tag and an end tag.

The body element contains two other HTML elements: The first one defines a heading, with the text "My First Heading". The second one defines a paragraph with the text "My first paragraph". Remember to always include the end tag, it might work without it but there's always a chance it will produce unexpected results or errors.

However, some HTML elements do not have content they're called empty elements and do not have end tags. An example of this is the br element which is an element with no content. It just defines a line break.

HTML tags are not case sensitive, both lowercase and uppercase works and means the same thing. However it is recommended to use lowercase tags. And with that said, we've covered the basics of HTML elements and how to use them To provide additional information about HTML elements you need to get familiar with attributes.

Attributes can provide more details about an element. They're always specified in the start tag of an element and usually come in name / value pairs like this. One type of attribute is href like in this example.

Links are defined with the <a> tag and the link address, or URL, is specified in the href attribute. Another type of attribute is src. We call that Source, like in this example: HTML images are defined with the <img> tag and the image source, or URL, is defined by the src attribute.

Images in HTML have a set of size attributes these correspond to the width and height of an image. For instance an image size with a width of 500 equates to 500 pixels wide. If you change the width to 300 the image will become smaller.

The style attribute is used to specify the look or style of an element. This is called CSS and you'll learn about that in another chapter. For now you just need to know that CSS allows you to change colors, sizes, and set the layout of your page.

The language of the document can be declared in the HTML tag with the lang attribute. This is important for screen readers and search engines. The title attribute specifies a title for an element.

The value of this title is displayed as a tool tip when you move the mouse over the element. Double quotes around attribute values are the most common but single quotes can also be used, and sometimes you actually have to use both. For instance if an attribute value contains double quotes it is necessary to use single quotes around it or vice versa.

So remember if you want to change something about an element you will probably need an attribute. Web pages are filled with a sea of words. If all the words look the same, your readers could get lost or worse: bored.

in order to spice up the page and keep readers engaged you should use HTML headings. HTML headings make titles and subtitles stand out in the sea of words on a web page. Here's what a page looks like without headings.

Here's what it looks like with headings. You can see now why headings are a must. They appear bigger and with more space than normal paragraphs.

There are six different heading levels. The levels range from h1 to h6 and each heading level has a rank. h1 is the largest and most important heading.

h2 is the second and on and on to h6 which is the least important heading. Each HTML heading has a default size. You can change the size with the style attribute, using the CSS font size property.

And to change the color of the heading you can use the CSS color property. Headings are important for many reasons. People often skim a page by its headings.

This way they can go right to the information they need. Search engines use the headings to index the structure and content of your web pages. See the search result shows the heading from the page.

If you want to engage your readers and get indexed properly be sure to use headings correctly. Now let's take a closer look at HTML paragraphs and how they are displayed. Paragraphs in HTML are defined by the p element.

Here are three paragraphs. This is how they are written in the code, and this is how they are displayed on the page. You can see that the browser automatically adds some white space, also known as margin, before and after each paragraph.

HTML can be a mystery. You can never be sure how HTML will be displayed. Screen sizes, as well as resized windows, will create different results.

With HTML you cannot change the output by adding extra spaces or lines in the HTML code. In fact the browser will remove any extra spaces or line brakes when the page is displayed. If you want a line brake use the HTML br element.

This brakes a line without starting an entirely new paragraph. While default HTML Pages can be quite dull, to add some color and personality to the page you need style. Setting the style of an HTML element can be done with the style attribute.

The style attribute contains CSS properties and values. CSS is the language we use to style HTML. Let's set the background color of a page.

The CSS background-color property defines the background color of an HTML element. To add a background color to this page we add style="background-color: powderblue" to the body element Now the background color of this page is powder blue. Now let's change the color of the text.

The CSS color property defines the text color of an HTML element. To add a text color to the heading we add style="color:blue" to the h1 element. Now the text color of the heading is blue.

Then we add a red color to the paragraph. Now let's change the font of the text. The font-family property defines the font to be used for an HTML element.

See? You can simply change it to Verdana and Courier. The font-size property defines the text size for an HTML element.

See? When the font-size value changes, the size of the text changes accordingly. The text-align property defines the horizontal text alignment for an HTML element.

To center a text we use text-align: center So always make sure you add style to your work, save beige for pants. In an earlier chapter we went over the HTML style attribute But did you know HTML also has elements for defining text with a special meaning? Of course not.

That's why you're watching this video! See these HTML elements? They correspond to formatting output like, bold, or italic text respectively.

But it goes beyond bold or italics. There are many different ways to display special types of text. Let's start with the b and strong elements.

b defines a bold text without any extra importance. strong defines strong text. This indicates important text and is usually displayed as bold in the browser.

Next is the i and em elements. i defines italic text while em defines emphasized text. One important thing to to note is that browsers display strong as b and em as i But there's a difference in the meaning of these tags b and i defines bold and italic text but strong and em means that the text is important as well.

Next comes small. It does exactly what you're thinking, makes text smaller. Then there's the mark element.

This element defines marked or highlighted text. There are are also elements that define deleted and inserted text. Use the del element which defines deleted or removed text.

Then there are subscripted text and superscripted text. sub is for subscripted and, sup is for superscripted, doesn't get much easier than that. Just to recap here are the different html text formatting elements and how they can change any text.

Now we will learn about comments. Not the bottomless pit of YouTube comments but HTML comment tags which are used to insert comments in the HTML source code. You can add comments to your HTML source by using this syntax.

Make sure to note that there is an exclamation point in the opening tag but not in the closing tag. Comments are not displayed in the browser, they're used to help document your HTML source code As you input comments you can use them to place notifications and reminders in your HTML See you next lesson Today's lesson will be perfect for you right brain thinkers. The topic: HTML colors!

HTML colors can be specified using color names, RGB or hex values. HTML supports 140 predefined color names Let's try to use color names in our HTML. First set the background color like this: Then you can set the color of the text like this: If you want to give your text a border insert the following code But you can be more detailed than just picking a color name.

Using RGB or hex you have more than 16 million color possibilities. That means you can turn the color of this tomato from this: to that! All you did was increase the amount of green.

Now let's learn about RGB values. RGB stands for Red Green and Blue. Each parameter red, green, and blue defines the intensity of the color between zero and 255 So if you need a real reds red then set the red parameter to 255, and the other two colors to zero.

But what about displaying black or white? To get black, all color parameters must be set to zero. Alternatively to get white all color parameters must be set to 255.

By using different combinations of red, green, and blue, you have over 16 million color possibilities. And if you're trying to get gray use equal values of all three color sources. Now let's learn about hexadecimal color values or hex.

The hex syntax starts with a hashtag followed by six characters. Just like the RGB color values, these characters represent red green and blue but now they are hex numbers and go from 00 to FF. So to get red set the value to the highest number which is FF and the other two to the lowest number 00.

See? There is also an extension of RGB color values with an alpha channel, which specifies the opacity for a color. This is called RGBA.

The alpha parameter is a number between 0. 0 which is fully transparent and 1. 0 which is not transparent at all.

And there you are. Now go out and add color to your HTML world! Greetings once again!

I would like this lesson to center on style. Specifically CSS Now CSS stands for cascading style sheets and it describes how HTML elements are displayed on a web page This has the ability to save many hours because it controls the layout of multiple web pages all at once There are three ways to add CSS to HTML elements First there's inline which is done by using the style attribute in HTML elements The second is internal which is completed by using a style element in the head section Lastly there's external which means using an external CSS file Let's take a look at the three options in action An inline CSS is used to apply a unique style to a single HTML element This is done by using the style attribute of an HTML element Just like this: Here we set the text to "blue" Next is internal CSS, which is used to define a style for a single HTML page An internal CSS is defined in the head section of an HTML page within the style element Just like that And the last option is external CSS which is used to define the style for many HTML pages With external style sheets you can change the look of an entire website by changing only one file To use this option add a link to it in the head section of the HTML page An external stylesheet can be written in any text editor but the file must not contain any HTML code It also must be saved with a . css extension It should end up looking like this That was a short introduction to CSS but don't worry we'll cover more of the specifics later on Now today we're discussing something found in nearly all web pages: Links They allow users to easily click their way from page to page To start let's discuss what HTML links are All HTML links are hyper links, they are clickable links that jump you to another document When you move the mouse over the link the mouse arrow will turn into a little hand Remember a link doesn't have to be a text it could be anything an image, a button or even me Now let's go into syntax.

Now in HTML all links are defined with the <a> tag like this The href attribute is like the road map it specifies the destination address of the link The link text is the visible part Clicking on the visible part then send you to the specified address Next we discuss local links The previous examples were using absolute URL, AKA a full web address A local link, AKA a link to the same website, is specified with a relative URL That means there's no www part like that By default a link will appear in one of three ways: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red But you can change the default colors by using CSS to learn more about that head to the CSS tutorial Next let's cover the target attribute. The target attribute specifies where to open the linked document It can have one of the following values: "_blank" opens the linked document in in a new window or tab "_self" opens the linked document in the same window/tab as it was clicked, this is usually the default "_parent" opens the linked document in the parent frame "_top" opens the linked document in the full body of the window Lastly frame name opens the linked document in a named frame But what if you want to use images as links it's actually pretty common and should look like this: As you can see we simply wrap the img element inside an a element You can add a title to a link using the title attribute The title attribute specifies extra information about an element The information is most often shown as a tool tip text when the mouse moves over the element Before we end class, let's do a quick chapter summary The a element is used to define a link The hrf attribute is used to define the link address The target attribute is used to define where to open the linked document Using the img element inside an a, will define an image as a link Greetings! Today's lesson: Images Images can improve the design and the appearance of your web page Especially if they are pictures of majestic things See these?

Well they actually look like this Let's take a look at what that means In HTML images are defined with the <img> tag The image tag has no closing tag and is what we call an empty tag But it should contain attributes The src attribute specifies the URL or source of the image Next let's go over the alt attribute It provides an alternative text for an image This is helpful if the user cannot view the image because of slow connection, error in the src attribute , or the user has a screen reader The value of the alt attribute should describe the image. So if a browser cannot show the image it'll display the value of the alt attribute instead And the alt attribute is required for images in HTML A web page will not validate correctly without it Next, image sizes. When you start to deal with the image's width or height use the style attribute to specify it It should look like this Another way to handle this is to use the width and and height attributes Make sure to note that you should always specify the width and height of the image If they aren't specified the page might flicker while the image loads While the width height and style attributes are all valid in HTML5 we suggest using the style attribute Now moving back to the src attribute and finding the specific location of an image If not specified the browser expects to find the image in the same folder as the web page But it's common to store images in a subfolder To do so you must include the folder name in the src attribute Another way to store images is on image servers You can access the images from any web address in the world You can also use animated images No matter how you pronounce them HTML allows animated gifs and gifs like this But what if you want to use an image as a link?

Just put the <img> tag inside the <a> tag like this To make an image float to the right or left of a text use the CSS float property. Like this Want to learn more? Float over to the CSS float tutorial Sorry I couldn't help myself But what if you wanted your image to be less functional and more aesthetic?

Namely a background image to be precise To do that on an HTML element use the CSS property background-image Which works like this. If you only want the background image on a paragraph specify the background-image property on the P element This is covered in depth in the CSS background tutorial Now we've covered a lot in this chapter but here's one final tip Loading images takes time, and large images can slow down your page so use them carefully But some are worth it In this lesson you will learn how to create a table No I don't mean the kind that needs chairs I mean the kind that arranges their data into rows and columns like this: So let's talk about the tools you need to build your tables You will use the HTML table element to define a table If you want to define table rows, use tr elements You'll need one tr element for each row Each row consists of one or more td elements, also known as table data These act as columns inside the table and define data for each table cell You can also add headings for each column by using the th element phew did you get all that? Let's do a quick recap Define a table with the table element Define rows with the tr elements Add headings with the th elements And add table data with td elements Those are the basic tools you need to build HTML tables By the way you should note the table headings are bold and centered by default and borders won't just appear automatically so if you want to border on your table you must specify it Here's how: The CSS border property defines a border As you can see in the result this will display a table with double borders If you don't want that use the border-collapse property to display a single table border If you want to add a little extra padding to the cells use the CSS padding property If you want to change the alignment of text within the cell use the CSS text-align property Now let's say you want a cell to span over many columns For that you have to use the colspan attribute It should be added directly to the table cell like this Just like you would have to use the rowspan attribute to make a cell span over many rows Well there you have it Now you know how to add tables to your website Happy building People make lists for all sorts of things To-do lists Grocery lists Bucket lists You can make lists in HTML as well There are two main types of lists in HTML Ordered lists and unordered lists Ordered lists have numerical or alphabetical markers while unordered lists have bullet markers Let's start by building an ordered list As you can see the <ol> tag represents the start and end of the ordered list and each list item is wrapped within <li> tags The list items are marked with numbers by default To change the marker style use the CSS list-style-type property For instance you can use the upper-alpha value to display A-B-C instead of 1-2-3 like this Or you could use the upper-roman value to use Roman numerals like this What about the other kind of list with bullet markers That's an unordered list and is built pretty much the same way But it uses the <ul> tag to represent the start and end of the list Each list item is still wrapped within <li> tags and of course you can use the CSS list-style-type property to change the markers here as well You can use circles, squares, or even no marker at all Now you know how to make lists in HTML Now you will learn about the two main display types in HTML Block and Inline As you've learned from the previous chapters, HTML elements behave in different ways Block elements start on a new line and take up the full width available, they stretch out to the left and right as far as they can Examples of these are headings, paragraphs, tables, and div elements Inline elements only take up as much space as necessary Examples of these are hyperlinks, images, buttons, and span elements Okay let's look at a real life example You've learned that headings are block elements They take up the full width available and includes a line break The paragraph element is also a block element, but what about this hyperlink?

Let's take a closer look See the hyperlink element is inside the paragraph and there are no line braks in the result That's the two main display types in HTML Block and Inline Hello class! Let's talk about the class attribute In HTML you have the opportunity to group or classify elements together This is helpful if you want to apply the same action for all elements in a specific group Look at this group of people What if we want all the people with red shirts to start jumping Hey! Red shirts!

Start jumping! In HTML we can use the class attribute to group elements For example if we want this group of elements to have a red background we add the class attribute with the value "my-group" Now these two paragraphs belong to the same class We can use CSS to select these elements with the class selector The syntax for the class selector is a dot followed by the class name In our example the class name is "my-group" As you can see the two paragraphs now have a red background By the way different elements can share the same class See now the heading element also has a red background because it has the same class as the two paragraphs HTML elements can also belong to more than one class Just remember to separate them with a space like this Now the heading element belongs to both the "my-group" class and the "main" class and we'll get the CSS styles from both classes Now class you know about class Goodbye class Hello again! Today let's learn about the HTML id attribute This specifies a unique id for an HTML element The id is a way to reach a specific element in a page Kind of like shouting a name in a crowd Hey Bill!

And it's very versatile too It can be used as an identifier for HTML, CSS, and JavaScript Let's look at an example for each of these: In CSS to select an element with a specified id write a hashtag character and then the id of the element Just like that Now let's see how we can use it in HTML In HTML you can use the id as a bookmark Anyway HTML bookmarks are used to allow readers to jump to specific parts of a web page This is very handy if your web page is very very long Want to make your own bookmark? First insert the id attribute and then add a link to it When that link is clicked the page will scroll right to the section of the bookmark You can even jump to a bookmark from another page But remember how I said you could use this in JavaScript? Let's go over to that JavaScript can access an element with a specified id by using the getElementById method See?

You can use the id attribute to manipulate text with JavaScript Want to learn more about JavaScript then head on over to the JavaScript tutorial Before we finish this lesson let's go over some rules for the HTML id attribute 1: The ID attribute can be used on any HTML element 2: The ID value is case sensitive 3: The ID value must contain at least one character and must never contain white spaces and 4: Each ID must be unique within the page Two elements cannot share the same id That's all I have for the id attribute Say goodbye Bill Bye-bye! Hello again Now we'll be learning about HTML iframes No they aren't the latest gadget from Apple Iframes are used to display a web page within a web page So it looks like this But how do you do this? Let's start with the iframe syntax An HTML iframe is defined with the <iframe> tag which looks just like that See that src?

The src attribute specifies the URL, or source, of the inline frame page Next let's tackle the height and width Use these two attributes to specify the size of the frame The attribute values are specified in pixels by default but you can also put them in percentages if you so choose Alternatively you can use CSS to set the height and width of the frame By default an iframe has a border around it To remove the border, add the style attribute and use the CSS border property Which looks like this Also with CSS you can change the size style and color of the iframes border Did you know that an iframe can be used as the target frame for a link? To do so, the target attribute of the link must refer to the name attribute of the iframe. Just like this.

Simple right? Right. Today's lesson: JavaScript It has the ability to make HTML pages far more dynamic and interactive Let's learn how We will begin with the <script> tag which is used to define a client side script Now the script element either contains scripting statements or it points to an external script file through the src attribute So what are the common uses for JavaScript?

Dynamic changes of content Image manipulation and form validation To select an HTML element JavaScript usually uses the document. getElementById method In this example the p element has an id attribute with the value of "demo" The getElementById method finds the p element Then we use the innerHTML property to change the content of the p element to "Hello JavaScript! " You can also change the style of an HTML element like this Or even change HTML attributes like this That was a small taste of what you can do with JavaScript Let's move on to more HTML Let's take a look inside the head element The head element is a container for metadata In HTML metadata is data about the HTML document A lot of what goes on inside the head element is not directly shown on the page much like the thoughts in your own head The head element is placed between the <html> tag and the <body> tag Metadata typically define the document title, styles, scripts, character set and other meta information Let's take a closer look at the title element which defines the title of the document The title is displayed in the browser's title bar, or tab, like this It also provides a title for the page when it is added to favorites and it displays a title for the page in search engine results Other important things found in the head section are: Styles, or links to external stylesheets, important keywords for search engines character encoding information and other things that make sure that your page behaves as expected on different devices or screens Phew!

That was a lot to remember If you want to learn more about the specific head elements go to our HTML head section on w3schools. com You've been handed plenty of forms throughout your life At the doctor's office at school for activities and programs If you want to sign up or join something you're usually going to have to fill out a form In today's age these forms are usually on websites and built with HTML An HTML form is used to collect user input The user input is then sent to a server for processing The HTML form element is used to create a form The form element is a container for different types of elements One of the most used elements inside a form is the input element The input element can be displayed in several different ways depending on its type attribute We have textfields, checkboxes, radio buttons, submit buttons , etc. Let's look at a real life example <input type="text"> defines a single line input field for text "My name is Bill" <input type="radio"> displays a radio button It lets a user select one option from a number of choices "This one, the burger" <input type="checkbox"> displays a checkbox It lets a user select many options from a number of choices "Check!

Check! Check! Check!

" "I'll have all of those on my juicy burger! " There are many more input types you can use Here's a quick list: In addition to the input element there are several other elements we can use in forms The select element defines a drop- down list It's a partially hidden list that drops down with a list of options that you can choose from "I'll pick this up at 5:00" The text area element defines a multi-line input field where the user can input text with more than just a few words Like a comment field "I would like my burger super well done! " Finally let's add a submit button so Bill can send in his order <input type="submit"> defines a submit button "I'm so hungry!

" When submitting a form the user input is sent to a file on a server for processing To become a form expert take a deeper dive into forms at w3schools. com So Bill can finally get his burger "Oh no! Don't make me fill out that form again!

" "Take 34. Action! " document.

getElephantBidy "Cut! " "Take 35. Action!

" document. getElementByMe "Cut! " "Take 36.

Action! " document. getElementById Yes!

I nailed it! "Take 37. Action!

" You've learned that headings . . .

. . Hey!

Red shirts! Start jumping! Stop!

Stop it Bill! We've been over this!