Transcripts
1. Intro HTML: Hi, welcome to this
course on HTML. Learning. Html is the perfect step to start learning how
to create websites. Once you can use HTML, the opportunities are endless. By taking this course, you will create a
basic web page. Through examples. We will start by
understanding what HTML is, and we'll look at how to
set up an HTML document. Will then move on to
topics such as using text, images, Lists, and
introducing basic styles. We will finish the course by looking at using
tables and forms. This course is
aimed at beginners. So even if you've never
programmed before, this course will help you
on your learning journey. My name is Emma and I work as a programmer in
the industry today. I love programming and
I love how can I learn? I hope you enjoyed this course.
2. What is HTML?: So what is HTML? Every time you visit a website, you are being exposed to HTML, introduced in 1993
by Tim Berners-Lee. Html stands for Hypertext
Markup Language. So what is HTML useful? Well, HTML is the skeleton
to all webpages and it's used to structure
the page and to show the content by using HTML, we can add and format
text, show links, lists, tables, and forms,
and we can include images and videos
on the web page. The world has changed
a lot since 1993, and technology has
evolved greatly today. The current version is HTML5. The World Wide Web
Consortium managed the standards for HTML and
decide what goes in it. Inside your browser,
you can inspect the HTML of any
website you visit. You can use any browser, but we'll try this using Chrome. Let's give this a go.
We'll visit google.com. We simply right-click and choose Inspect tab showing elements appears and we can see
the HTML for the page. I said the HTML stands for
hypertext markup language. What does this mean? Well, hypertext describes text which provides access
to another page. It does this by our link, which is known as a hyperlink. If I visit a website
that displays the weather forecast and
then I inspect the page, the country here is an
example of a hyperlink. And I can confirm this
when I view the elements. When I click the button, I get navigated to a new page. A markup language is a computer language which describes how text is displayed, just like when you
have underlined or highlighted some texts, perhaps in a textbook
or in a document. A markup language is
a computer language which specifies the structure
and the presentation. We wrap the text we want the browser to display
in elements and tags so that the browser knows how to display
it correctly.
3. The anatomy of a tag: In this video, we're
going to introduce HTML tags and the
anatomy of attack. Combining multiple
elements is what makes up the overall structure
of a webpage in HTML, the elements
themselves are usually made up of an opening
and closing tag, which can be thought of as
wrappers or containers. There is more than
one type of tag, the most followed the
structure of a piece of text started with an opening tag and ending with a closing tag. Let's start by looking
at the opening tag. The character placed inside of the brackets is the
type of the tag. For a paragraph, we
will place the letter P. The closing tag
is exactly the same, except that we use
a forward slash after the first bracket. Attributes enable us to add more information
about the element. We place the attribute
inside the opening tag. To do this, we use a name and a value joined together
by an equal sign. The name is the type
of the attribute and the value is the value
you wish to be assigned. For best practices, the
attribute name should be lowercased and enclosed
within double quote marks. In the last video,
I mentioned how HTML had evolved greatly
since it was created. One of the aspects of
this is how tag names for formatting has started to lean towards what we call semantics. Or in other terms, the
meaning in the past, bold text would
be referred to as bold and italics as italics. Whilst we can still use these, these days is becoming
more common to use words such as strong and
emphasized instead.
4. Setting up the document: Now we have a bit of an
understanding about what HTML is. We can start to look at
setting up our document. In order to set up
an HTML document, certain elements are required. We start with the document
type declaration, which must be the first line of the code in the HTML document. This is an explanation
mark DOCTYPE HTML. This lets the browser know
that we are using HTML. The current behavior of using HTML here is that
the browser will assume we're using HTML5 as it's the current
standard version. When you save the file, you must save it,
ending with a dot HTML. We'll call our file index HTML. After the DOCTYPE declaration, we can add opening and
closing HTML tags. Anything that goes between
these HTML tags will be read or interpreted as
HTML code by the browser. Next, we use the
head tag or element. This will contain metadata, which is information about
the webpage for the browser, and it's not displayed
on the page itself. Inside the head, we can tell the browser where to
find other files, such as for the CSS
and the JavaScript. Another example
is the title tag. The title tag is important
for screen readers and search engines
depending on the browser, this will be displayed
in the tab bar. We must define a
non-empty title here. Next, we go on to
adding the body tag. Only the elements inside of the body tags will be
displayed on the screen.
5. Hierarchy and formatting: Welcome back. So before we go any further, I'm briefly going to discuss hierarchy and also formatting. It's important to understand the structure or the
hierarchy of the HTML. Because as you work with
more HTML and also CSS, these elements can inherit behavior or styles
from one another. We can think of HTML as we do when we look
at a family tree. So we have parents, children, siblings, grandparents,
and so on. When we nest one element
inside of another element, we call the element
on the inside the child and the element
on the outside the parents. Two elements when nested
inside the parent, these could be referred
to as siblings. With regards to formatting, HTML usually ignores whitespace, but it's good to get into formatting practices in order to make sure that the
document is readable, it's best to put new
tags on a new line. And anything inside the tag should be indented by one level. So usually this is two spaces. It's good to make sure
that your text editor is configured properly to use spaces instead of
genuine tab four spaces aren't uncommon to see, but it can make the content
a bit harder to work with because it can start
to fall off the screen.
6. Headings: Now we've got our
document setup. We can move on to
adding some elements. When you read a document, usually the document
has a heading which is larger than the rest of
the text on that page. This is very common in printed publications
such as magazines. Headings in HTML work
in the same way. In HTML, there are six
different types of headings, and we call them headers. H1 is the largest and they gradually get smaller as you
work your way down to H6, a good way to
remember headings is the H1 will be the main heading. Subheading would be H2 is also worth knowing
that the default size that the browser
will display the heading in vary slightly
depending on the browser, but this can be managed by
using CSS in our document. Let's go ahead and add an H1 tag with the
text, our sports. We use the opening bracket H1, and then close the bracket and we'll add the closing bracket, which is the bracket
forward slash H1 and the bracket
in-between the two, we'll add the text are sports. Next, we'll add an H2 tag with the message
famous athletes. Lastly, we'll add a3 h3 tags. Give these the texts, swimming, running,
and gymnastics. Let's save this and run
the code in our browser. In our browser, we
select Open File, and then we open the HTML file. Now we can see the page we
have started to create.
7. Paragraphs: In this video, we're going to look at creating paragraphs. To create a paragraph, you enclose the text inside tags containing P. The
default behavior for multiple paragraphs is
that the paragraph will be placed on a new line with
some space added between. There's no limit to
how long or short the text inside the
p tags needs to be. Let's add three paragraph tags, one under each of
the H3 headings we created in the last video. In the first one, we'll say a famous
swimmer is EN thought. In the second, we'll say a famous runner is Usain Bolt. And in the third one, we'll say a famous
gymnasts is Simone Biles. Let's save this and
run the page again. We can simply reload the
screen in the browser. Now we can see the
three paragraphs have been added to the screen. So before we move on, let's recap what we
have just learned. We can create headings
using headers, which can be anything
from H1 to H6. We can also place text
inside paragraph tags, which used the letter
P inside the tag.
8. Inline and block elements: In HTML, every element is displayed either as a block
element or an inline element. If you imagine you
are taking a trip to the supermarket than the island, the supermarket usually takes up the whole space of the floor and therefore would be
the block element. On the other hand,
when an item is placed on a shelf
within a supermarket, it fits next to the other items, only taken up as much
space as it needs. Therefore, this is like
an inline element. When we create an
element in HTML, the element either repairs on a new line or it appears
within some content. When we create a heading, we want the heading to stand out and be an entity all on its own, and it appears on a new line. So this would be
a block element. When we make some tech strong, we don't want to interrupt the
flow of the content around the strong text and it does
not appear on a new line. So this is an inline element. Header tags, lists and paragraph elements are all
examples of block elements. Block elements will take up
all the available width. On the other hand,
inline elements do not start on a new line and the
flow of the content around the element does not
change strong and am tags are an example of inline
elements as the images. Inline elements only take up as much of the
width as is needed.
9. Attributes: Welcome back. In this video
we're going to look at attributes. What are attributes? Attributes, let us add extra
information to an element. We add the attribute
to the opening tag. Examples of common
attributes that we can use include the title, id, class, and style. Although there are others, the main use of an
attribute or to apply styling or information, such as language-related
information. There are two parts
to an attribute, the name and the value. These are separated
by an equals sign and the value is placed
inside double quote marks. The name is the attribute name and should be in lowercase. The value is the value we want
to set for the attribute. And this should be wrapped
inside double quote marks. We're going to use
the id attributes and add them to the deaths we
created in the last video. The first div will
use the value header. The second div will
use the value content.
10. Divs and spans: In HTML, div is
short for division. This represents a container that divides the page into sections. By using a div, you can group the elements of
your HTML together. When you use a div, the user won't actually see
any difference on the page, but they're very useful when
you want to add styles to groups of elements
later by using a div, you can apply the styles to
the whole section in one go, you can wrap anything
inside of a div, but it's good practice
to remember to indent the elements that
you nest inside of the day for
better readability. In the last video, I mentioned
inline and block elements. A div is a block element, so the content inside the div will be
placed on a new line. You can wrap a group of
paragraphs inside of a div. And the same approach
could be applied to images or headings in HTML, we can also use span. A span is usually applied to some inline content and is
itself an inline elements. So it won't appear on
a new line and it will only take up as much space
as the content does. You could apply span two
small pieces of text or images where you don't want to break up the
surrounding content. If you only want to target
a specific piece of content on the same line
as some other texts, then it's best to
use a span when you want to divide up your
content into blocks, then it's best to use a div. We're going to add some
depth to our page. We'll wrap the H1 and H2
tags inside of a div. We will then also wrap all the H3 tags inside
of another div. Let's save this and
reload the page. Visually, nothing has changed, but if we want to
apply some styles to some groups of
elements later, we can now do this
much more easily. So to summarize, in HTML, we have block and
inline elements. Block elements appear
on a new line, whereas inline elements
appear within the content. We can use dips and spans, which are very useful when we
want to apply some styling. Divs are block elements and
spans are inline elements.
11. Strong: Welcome back. I mentioned earlier
about strong and emphasized being used for
bold and italicized text. In this video, we're going
to make the names of our famous athletes on our
page to use strong tags. To do this, we'll nest the
tags and place the strong tags inside the p tags around the piece of texts that
we want to use strong. When we nest tags, we must make sure that
we close the tags in the reverse order of
how they were created. So the last tag which is created should be the first
tag to be closed. So let's start by
adding strong tags around the text that
says E and Thorp. We'll also do this in the second paragraph around the text that says Usain Bolt. Lastly, we'll do this around the texts that
says Simone Biles. Let's save this and we'll
reload the page in the browser. Now we can see that
our athletes names appear bolder than the rest of the texts in the paragraphs.
12. Em: Welcome back. In the last video,
we added strong tags around the athletes names
to make the text bold. In this video, we'll
look at the EM tags, which means the text
becomes emphasized. By using the EM tag, we can emphasize which
means italicize the text. These tags work in a similar
way to the strong tags. So we place them inside
the tags that contain the texts that we want
to italicize emphasize. We're going to do this
to the sports names which are enclosed
inside the h3 headers. We'll start with forming
inside the h3 tag. We now add an EM tag. We close the tags in the reverse order that
they were created. So straight after the end
of the word swimming, we close the EM tag. We will repeat this for the other two sports,
running and gymnastics. Let's save this and reload
the page in our browser. Now we can see the text for
each of the head is swimming, running, and gymnastics
appear emphasized. Italicized.
13. Underline: Welcome back. When we're
working with HTML, another element which is
available to us when we're working with text is
the underlying element. The underlying element
will underline some text. To use the underlying element, we use the tags
with the letter U. There are a few caveats with
this element to be aware of. To underline some texts in
HTML is better to apply a style in CSS via a property
called text decoration, for which you set
the value underlying the HTML underlying
element itself, meant to be used to mark
some texts in some way. For example, if it had
a spelling mistake or if you are using
Chinese texts, the underlying element
should not be used for display reasons alone without
another valid reason, such as the spelling error. For demonstration purposes only, we're going to add the
underlying element to the word swimmer, runner, and gymnasts
inside each of the p tags. Later we'll revisit
this and implement it properly using CSS in our HTML. In the first paragraph around
trauma, we add the tag. You will close this
straight after the word. We will repeat these steps
for runner and gymnasts. Let's save our HTML and
reload it in the browser. You can see now that the
text has been underlined, but this could easily be
mistaken for a clickable link.
14. Links: Welcome back. In this video, we're
going to look at links to add a
link to a webpage, you use the anchor element. This is represented
by the letter a. In between the opening
and closing tags, we placed the text
that the user should see when they press the link
inside the opening tag, we use an attribute to set
where the links should go to. This can either be a
path or an address to a file on your
computer or on a server. Usually though, for links, the path for the
attribute is a URL. The name for the
attribute is H ref, and this stands for
hyperlink reference. Hyperlink is a technical
term for a link. We can also use a
target attribute which will specify where
the links should open. The default behavior
do not amend this attribute is that it will open in the
current window. If you change the value
to underscore blank, then it will open in a new
window or tab in our HTML, we're going to add three links, one inside each of the sports, which will navigate the user to a Wikipedia page
about that sport. So starting under the
paragraph about swimming, we'll use the a tag to make
opening and closing tags. We'll add the link text. Learn more about
swimming. Inside the tag. Will add the H ref attribute and add the Wikipedia
link for swimming. Next, we'll do the
same for running. We add the a tags. We add the link text, Learn more about running. Then we'll add the
H ref attribute and add the Wikipedia
link for running. Lastly, we'll do the
same again below the paragraph about gymnastics. We add the a tags, then the link text. Learn more about gymnastics. We add the H ref attribute, and then the Wikipedia
link for gymnastics. Let's save this and we'll
reload the page in our browser. When I took the link, learn more about swimming. I now get navigated to the
Wikipedia link for swimming. So to summarize what we
have learned in this video, we add links using
the anchor element, the link the user sees is placed as text between the
opening and closing tags. We use an H ref attribute to set the location
for the link. If you want to
change the behavior for how the link opens, you should use the
target attribute.
15. Images: Welcome back. In this video,
we're going to look at adding images to our page. To add images to the page, we use the image element. This is the letters
IMG inside of the tag. While most elements in HTML require us to use opening
and closing tags, the image tag is what is
called a self-closing tag, or sometimes referred
to as a Void elements. This is because we implement
it using just one tag. The reason for this is
there is no content which needs to be placed between the opening and closing tag. You may see some examples which do use a separate closing tag. But in HTML5, this
is not a necessity. You can think of adding
images, like adding links, because we add an attribute with the path of the image
we want to display. But the structure of the tag itself is slightly different. To set a path of the
image we want to display, we use an attribute
called source. This is represented
by the letters S, RC. We also set another
attribute called this attribute dance
for alternative text. And it should contain
a description of the image in case
it fails to load, setting it all to
attribute is also really important for
accessibility purposes. So for example,
if someone who is visually impaired
visited our page, then by using the ALT
attribute that can be read a description
of the image by their screen reader using
the alt attribute is also very useful when it comes to search engine optimization, because search engines
themselves cannot see the images when you are
adding images to your page, you can use a direct link to the image from somewhere
else on the web. And this would be
called hotlink king. However, generally, this is not great practice because
it means you are now depending on another website and assuming the image
will always be there, suddenly, this can open up a lot more opportunities
for errors to occur. So we're going to add
an image to our page which will go under the
heading, our sports. You're welcome to
use any image here, but I'm going to use one
from the website pixabay. Inside of the directory
of your index.html file, you need to create a new
folder called images. Next, you need to
download the image from the Pixabay website to your computer and copy
it into this directory. Once this is all done,
you should be able to see the image inside
your text editor. Now, when we use the image, because it is part
of the same project as the index.html file. We can use the relative path, and this will automatically
get interpreted to the full path in the HTML
code under the header. Let's now add the image. So we start by using the
letters IMG inside of the tag. Next, let's add the
source attribute. So we add the letters SRC, followed by the equal sign. And for the value, we
place the image path. Now for the alternative
texts attribute, let's add a value. We're going to say
a sports stadium. Because this is a description of what the image represents. Let's now save this and reload
the page in our browser. Now we can see the
image has been added to our screen
successfully.
16. Lists: Welcome back. In this video, we're going
to look at lists in HTML. When you're working with HTML, you have some options as to how you wish to display your text. We have already seen how to
use the paragraph element, but there may be times when
you have some texts you would like to display as
a list in HTML, there are two kinds of lists. We can use, ordered lists
and unordered lists. Ordered lists are represented by a tag using the letters O, L, and unordered lists are represented by a tag
using the letters UL. With both of these, the items inside the list
are called list items, and these are represented by
a tag with the letters LI. By default, the
browser will indent the lists, ordered lists. Ordered lists display the
list items with numbers. So if you have a list
that represents steps or results or some sort of item that needs to be
displayed in a sequence, then this can be really useful. The other hand, unordered lists use bullet points to
display the list items, and these can be styled via CSS. Unordered lists can also be
useful for site navigation. One thing to bear
in mind when you are creating a list is that the ordered list or
unordered list element is more like a
container for the list. The texts with the
list items should be wrapped inside
the list item tag. So on our page, we're going to add a list. We don't have any need to
use an ordered list for this because there's nothing to
display in a certain order. But we're going to
implement this first using an ordered list and then re-implemented using
an unordered list. Let's start by adding the
ordered list element. So we create opening and closing tags with
the letters OL. We have three sports we
want our list to contain swimming, running,
and gymnastics. So let's add list items
for each of these, we use the letters LI inside of the tags for the list items. Select, Create three of these. In the first list item, we'll add the text for me. In the second, running. The third gymnastics. Let's save this and reload
the page in the browser. Now we can see our list and each item in the list
has a number next to it, because we're using
an ordered list. Let's change this to
use the unordered list, as we have no need for
the list items to be in any order inside the OL tags. We'll change these to use UL. This is actually all
we need to change as the list items themselves are the same for
either type of lists. This time we can
see our list again, but the list items use bullet points because we're
using the unordered list. Let's recap what
we've just learned. We can create lists
in HTML using OL for ordered list or
UL for unordered list, we represent the items in
the list using the LI tag. Ordered lists are
useful to display items in a sequence
and use numbers, unordered lists,
use bullet points.
17. Styles: Welcome back. In this video, we're going to introduce
using styles in HTML. This is an HTML course, so we won't be diving
deeply into this topic, but it's still incredibly
useful to know the basics. When we want to add
styles to the web page, we need to use CSS. Css stands for
Cascading Style Sheets and is a styling language. There are three
options available for how to use CSS on
the percentage, we can use external CSS. Internal CSS, inline CSS. External CSS means
that we import the styles from another file
which has saved externally. Internal CSS means that
the styles are stored inside the style element
inside the same file. Inline CSS means that we
use a style attribute directly on the
individual elements that we want to apply styles to. If you only want to
apply a couple of styles than inline CSS is fine, but it's usually cleaner to keep the styles isolated
from the HTML. If more than one person is
working on the web page, then this is definitely
something you should consider. And in the long run and
external style sheet is usually a more
maintainable approach. Another benefit of not using inline styles is that you
can create one style rule, but apply this to
multiple elements. This means less typing
and duplication. We're going to start by
looking at inline styles. This means that we placed
the styles directly into the HTML elements by
a style attribute. We use the style attribute
followed by an equal sign, and then quotation marks
inside of the quotation marks replaced the style or styles that we want to
apply to the element. When you declare the styles, you use the property
name and then the value. And you separate
these with a colon. If you want to use
multiple styles, you place a semicolon at
the end of each tile. Usually though, is
good to get into the practice of just
adding the semicolon after the style so that we
can add more styles later without risking
creating any errors. The first thing
we're going to do on our page with
styles is to remove the incorrect usage
underlying element that we implemented
in an earlier video. As we want to underline the text for display purposes, only. Doing this with the
underlying element is not the right way
to achieve this. Instead, we're going to use a property called
text decoration. This property lets you add
some decoration to the text so you can place a line through
the text over the text, under the text are both
under and over the text. In our case, we want to
place a line through the text so we can set this
property to underline. Let's go ahead and
implement this. We're going to start by changing the underlying
element to be a span. This means we can target
the inline content without applying styles to
the surrounding content. Next we add the style attribute, followed by an equals sign, and then some quote marks. Inside the quote marks, we add the
text-decoration property, a colon, and then
underlying for the value. We also add a semicolon. Let's repeat these steps for the other two
underlined elements. Let's save this and reload
the page in our browser, we see the underlying text. But this time round, we have implemented this correctly by using styles as opposed to
using the underlying element.
18. More styles: Welcome back. Now that we've implemented
our first style, we're going to
refactor this to use an internal style sheet and then later an external style sheet. So as a reminder, an internal style
sheet is where we use the style element
inside our document and replace all the styles
for our document inside this element using
CSS class selectors. Css class selectors provide us with a way to
label our styles. And we place a dot before
what we label the style, and after the label, we place a set of curly braces. Css classes also mean that we're able to give more than one
element the same styles. So you don't have to write out the styles every time that
you want to use them. We then add the
class attribute to the element who wish to
apply the styles to. And we use the class name as
the value for the attribute. As this is an attribute, we separate the
name and value by an equal sign and the value
is placed inside quote marks. So let's go back to our HTML and implement this in our page. Let's move the inline
style we created for the text-decoration into
an internal style sheet. So in our page under
the title element, we're going to add
the style element. We do this using opening
and closing tags with the text style. Now inside style element, Let's add the style we want to use in a class called
underlying text. We use a dot followed by
the name underlined text, followed by opening and
closing curly braces. Inside of the curly
braces we add the styles. So in our case, we want to add
text decoration underline. Now, we need to add a
class to the element. Will remove the inline styles. And we'll replace this
with the class name. We say class equals, and then use quote marks. Inside the quote marks, we add the class name. Let's save this and reload
the page and our browser. The page still looks the same as when we use inline styles. Now, if we wanted to take
this a step further, we could extract these styles into an external style sheet. We'll start by creating
a new directory to store the CSS file. Inside the directory will
create a file called main.css. Now, let's move the styles
from the style element in our HTML file into
our main.css file. We can then remove
the style elements from the HTML document. So how do we import this CSS
file into our HTML file? Well, in HTML, we can use an element called
the link element. The link element lets you declare the
relationship between the current file and another resource from
outside of the file, we use an attribute
called relationship, and this is represented
by the texts row. This will state the
relationship between the current file and the
file we're going to link. We also need to use
an H ref attribute to add the location for the
file we're going to link. Link does not display
anything directly, so we only need to use a
single tag inside of the tag. Let's add the rail attribute. Then we'll set this to
the text style sheet because this is
the relationship. Next, let's add
the HREF attribute and then the location
of the CSS file. In our case, this is CSS slash main.css because the main.css file is now stored in
the CSS directory. Now let's save the file and
reload it in our browser. Again, nothing has changed visually from the
user perspective, but the CSS is now being
imported from an external file.
19. Additional styles: Welcome back. Now we've become more
familiar with style sheets. We're going to add a few
more styles to our document. The first thing we're
going to do is make the whole page use a background
color of light blue. And we're also going to
center all the text. So we'll add a class to the body tag called
main background. Now in the CSS file, let's add the class. And then we'll set
background color to light blue and
text-align center. Next, we'll make our
H1 header to be navy, so it stands out a bit more. So we'll add a cost to the
H1 element called heading. Inside the CSS file, we'll add the class and
we'll set the color to navy. Next, we want to make sure
our image will be centered. So we'll add a class to the
image element called image. Then we'll add this
to the CSS file. In the CSS, we'll set display
to block margin-left, auto. Margin-right, auto width to 50%. Using margin auto less the center a block
element horizontally. Now let's add some additional
styles to our list, so that also gets centered. We'll add a class
called UL styles. In the CSS file. We'll add this class. I'm all set display
to inline block. This means that the element gets treated as an inline element. So there is no force new line, and it will only take up as
much width as necessary, but also align the text to the left so that it appears
next to the bullet points. Now let's save our
file and reload it in. The browser. Page has changed and we get all the styles we just applied
showing on the screen.
20. Tables: Welcome back. In this video, we're going to look at
using tables in HTML. Sometimes when you're
working with HTML, you may have some data you
want to display in a table. An example might be
some score results. This could also be useful if you had a page
where you want it to display some financial
details in HTML, tables are represented
by the table element. This is opening and closing
tags with the tax table. Each row within the table is represented by the
table row element. And this is the opening
and closing tags with the text T are usually when you create a table
on the first row, you use headers for the columns. And we can do this in HTML
with the table header element. To use this, we use the
opening and closing tags with the letters TH
in the table headers. We can also set a
scope attribute, which is very useful
when someone with a screen reader visits the site. In this attribute, we set when the value is a row or column. With all this, you
have a table set up, but no data in the table. To add data to the table, we use the table data elements. This is opening and closing
tags with the letters t, d. If you need the table data to span across multiple
rows or columns, then you can use the row
span or colspan attributes. And you set a number for
the value which will state how many rows or columns but
the data should span across. So let's have a go at
implementing a table in our file. We're going to add
a table which will show the total number of medals each of our athletes as one at the Olympics that they
have participated in. We will add a table before the h3 headers with the sports. Let's start by adding
the table element. We add opening and closing
tags with the tax table. Our table will have two columns, one for the athletes name and one for the
total medal count. Given this, we want to add
two headers to our table. So to add the headers
to our table, we firstly need to add a
row to contain the headers. We add the opening and closing
tags with the letters TR. Inside of these tags, we can add the headers. So we add the table
header element using tags with the letters TH. We're going to add two of these. As these headers of the
columns will set the scope attribute with a value called
in each of the elements. Inside the first header, we'll add the text athlete. And inside the second header, we'll add the text medals. Before we go any further, let's save this and have a look. What we've done so
far in the browser. What we see is our two headings because we haven't
added any data, but we are on the way to
creating our first table. So now let's go ahead and
add some data to our table. One, the first row,
we're going to add how many medals that
am Thorpe is one. So we start by creating a row. Next, we need to
add two data cells, one for the name and one
for the metal total. We do this using the
table data elements. So we create opening and closing tags with the letters td. Inside the first one, we'll add the text info. Inside the second one, we'll add nine to
the medal count. Now we need to
repeat these steps again for the other
two athletes. Let's start by
adding another row. Now we need to add another
two table data elements. In the first one we'll
add the text Usain Bolt, and then the second one will add eight for the middle count. Finally, we need to add a final table row and another
two table data elements. Inside the first one, we'll add the text Simone Biles, and inside the second one will add seven is the table data. Let's save our file and
reload it in the browser. We can now see our table
with all our data. It isn't very aligned to the
rest of the page though. So let's add a few styles
inside the table element. We will add a class
attribute with the value athlete table. Now inside our CSS file, let's add this class. In the class, we're going to
set width to 22.5 per cent. Margin-left auto,
margin-right auto. And let's give the table a
background color of green. Let's save everything
again and reload the page. This time, our table is centered and it has its
own background color.
21. Introducing forms: Welcome back. In this video, we're
going to introduce forms in HTML in our day-to-day lives, we often fill out
forms when we need to share some information
for some purpose. Perhaps were attending
a health appointment or maybe we're
applying for a job. But sometimes we just use a form to select some
items we want to buy. Usually, a form is some sort of document with blank
spaces that you fill in with your details or make some selections in HTML, forms work in a similar
way to the paper ones. We can use the form
element to gather information from people
who visit our web page. Sometimes when we visit
a webpage which just uses a text input field
such as Google Search. We're actually using a form
to use a form in HTML, we use the form element, which is the text form
inside of the tax. Let's start by adding
a form to our page. We'll do this before
the closing body tag. We use the tag with
the text form. And then we close it. We can add some text
inside of the form, just like we do on the rest of the page with headers
or paragraphs, Let's add a title for the
form inside of H1 tags. We'll call it questions. Form. It's not much use unless the user can actually
input some data. We use input fields within our form using the
input element. Inside the input element, we can set a type
attribute which will set how the input field
shows on the webpage. And it also sets the type of the data which the
user can input. By default, the type
attribute is set to text so the user can
type text into it. We could change this to
password if we wanted the user to input a hidden
password or number, if we wanted to use it
to add some numbers, we can pre-fill a
text input field by using the value attribute. We also need to use
a name attribute. The name attribute gets
paired with the value inputted into the input
when the form is submitted. So for example, if we
had an input field named first and user
typed in their name, which was Fred when
the form is submitted, first would equal
thread on our page. Let's add an input to our form. We start by using the tags
with the input element. We're going to ask our user to input their favorite sports. So we set the type is text, the name as question. We'll also set an
id with Favorite. To label an input, we use the label element. This helps the user
identify what the input is for the label element
uses opening and closing tags and the text for
the label is placed between the tags in order
for the label to be correctly matched to
the correct input, we need to set an id
attribute on the input, and then a afford attribute with the same value gets
set on the label. Let's add a label to the
input that we just added. So we use opening,
closing tags with label. We set the ID of the
input which was favorite. And in-between the tags, we say, what is your
favorite sport? If we wanted to present
multiple options to our users and allow them to
select any number of options. We could use the input element and set it to the type checkbox. We're going to add a
set of checkboxes to our form to ask our user to select their
favorite athletes, will start by using the
paragraph element with the text, select your favorite athletes. Next, we'll add
three check boxes, one for each of our athletes. We start by using
the label element and we'll set for two. Thorpe will also add
the text in Thorpe. Next we add the input. We set id to the same value as the for attribute
in the label, which is the name to athlete, type, to checkbox,
and value to Thorpe. Let's repeat these steps
again for our other athletes. So we use the label element. And this time we
sat for two boat. Will also add the
text Usain Bolt. Next, we add the input. We said id to the same value as the for attribute in the
label, which is boat. Moves that name to athlete, type, checkbox,
and value to vote. Lastly, we'll do this
again for Simone Biles. So we use the label element
and we sat for two biles. Will also add the
texts Simone Biles. Next, we add the input. So we set the ID
to the same value as the for attribute in the
label, which is Bibles. Then we set name to athlete, type, to chatbox, and
value to buy homes. Let's also add a line
break between each of the checkboxes so that each Checkbox appears
on a new line. To do this, we'll use
the line break element, which is the letters
BR inside of the tag. We only have to use a
single tag for line breaks. Now let's save this and
reload the page and our browser or form is
starting to take shape. But let's just briefly change the order of the first input and label so that the label appears
before the input field. So back in our code will place the label for the input element. We'll save this and
reload the page again. This time we see the label
appears before the field.
22. Form buttons: Welcome back. In the last video, we introduced forms in HTML. At the end of the video, we added some
checkboxes to our form. This is great when we don't mind how many options
the user selects, but if we only want
them to select one item than a radio button can
be more appropriate. In this video, we're going to add a radio button to our form, which asks the user whether they liked our website and give them the option to select yes or no to create a radio button, we use the input
and label elements, just like when we
created the checkboxes. This time though, we set the type attribute on the
input element to radio. Let's go back to our
page and implement this. So we'll start by
adding some text inside p tags to ask the user if
they liked our website. Now let's add the
two radio buttons. So we add the input element with the type set to radio or DTS. Name to question and value. Yes. Now for the label element, we create the label
using the label tags. And in-between the tags, we add the text, yes. We'll also set the
for attribute to yes, as this is the ID on
the input element. Let's repeat these steps again, but this time for the no option. So we add the input element
with the type set to radio, Musette ID to know, name, to question,
and value to know. Now for the label element, we create the label
using the label tags. And in-between the tags
we add the texts, no. We'll also set the
for attribute to know as this is the ID on
the input element. Let's save this and reload the page and our browser again. We can now see our radio
buttons have been added to the page so the user
can select yes or no.
23. Submitting the form: Welcome back. In computing, computers send and receive information
using HTTP requests. If you think of the Internet
as network of computers, then in a nutshell, the client, which is usually the browser, can send a request to a server, and when it does, it
uses the HTTP protocol. This is essentially
a set of rules or procedures for sending data. The server will then respond in some way using the
same HTTP protocol. When we used a form, the user provides
some information which will then be
delivered to the server inside of the HTTP
request in order to satisfy the ability to send
the form data to a server, we have to get the
form elements and attributes for where
the information from the form should be sent to and what type of HTTP
requests to make. To do this, we use the action attribute to state where
the information is sent to, and then a method attribute
for the type of the request. And this can be GET or post. But if you're using
sensitive data, you should use post here, we're going to set the action
to a dummy URL on our form, which we'll call dummy HTML, will create this page. Now. We'll leave it blank as this is purely for display purposes. We'll then use the post method. In order to submit
the form we lost, we need to add a submit
button to our page. To do this, we use
the input element with the type attribute
set to submit. We then set the value to the texts that should
show on the button. If we don't set this
value attribute, it will default to submit. So let's wrap up our form by
adding the submit button, will do this at the
end of the form. So we use the input element. We set type to submit. We'll also set the
value to complete. Now let's save this and reload
the page in the browser. We now have our form complete alongside
the rest of our page. Now let's fill in the
form of some values. Let's go ahead and press
the Submit button. We get navigated to the dummy dot HTML
page, which was blank. However, we can open up the developer tools
in our browser. In Chrome, we access
this by selecting View Developer
JavaScript console. We then go to the tab
that says network. So let's go back to our
page and resubmit the form. Now, we can inspect
the request and see the form data
which was sent. If we had used get
as the method, the submitted form
data would be visible in the file URL on the screen, which is why this is not
suggested for sensitive data.
Emma Williams
