Computer Programming

.NET,
html
attributes
Recap?
What can you remember
about our last topic.
How many HTML
Elements does it
have?
4
How many HTML
Elements does it
have?
3
How many Empty
HTML Elements
does it have?
4
 The whole HTML
element is supposed to
show on my webpage.
Is this true or false?
False, only the
contents should
appear on my
webpage
What do you mean by
nested HTML Element
It means that html
elements can
contain other html
elements
Lesson 12
After this lesson, you will be able to
answer the following questions:
✓ What is an HTML Attribute?
✓ What is an Attribute name?
✓ What is an attribute value?
html
Attributes
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the starting tag
• Attributes usually come in name/value pairs like
Example “name of attribute”=“attribute value"
example

<a href=“https://www.youtube.com”>Youtube </a>

What does this

code do?
example
<a href=“https://www.youtube.com”>Youtube </a>

It will make the text “youtube” clickable, and when

you clicked it, you will be redirected to youtube.com

Wow! Is that
magic
 Let’s
investigate
this code

<a href=“https://www.youtube.com”>Youtube </a>

<a href=“https://www.youtube.com”>Youtube </a>

HTML Element
<a href=“https://www.youtube.com”>Youtube </a>

Ending tag
<a href=“https://www.youtube.com”>Youtube </a>

Content
<a href=“https://www.youtube.com”>Youtube </a>

Starting tag
 The opening
tag seems to
be a bit longer

<a href=“https://www.youtube.com”>Youtube </a>

<a href=“https://www.youtube.com”>Youtube </a>

Tag or main tag

 Take note that the
attribute consists of
Attribute name and
attribute value

<a href=“https://www.youtube.com”>Youtube </a>

Attribute
 Take note that the
attribute consists of
Attribute name and
attribute value

<a href=“https://www.youtube.com”>Youtube </a>

Attribute name
 Take note that the
attribute consists of
Attribute name and
attribute value

<a href=“https://www.youtube.com”>Youtube </a>

Attribute Value
 attribute values
should always be
quoted in HTML

<a href=“https://www.youtube.com”>Youtube </a>

<a href=“https://www.youtube.com”>Youtube </a>

space

Take note!
The attribute is always separated by a
space from its main tag
this is how we write the syntax of the HTML
element

#1 Type the opening tag

<a>
 #2 if you are going to add an attribute you
need to type a space before the attribute

<a href

space
<a href=“https://www.youtube.com”>Youtube </a>

Attribute Attribute
name value

#3 type the attribute name and attribute value

<a href=“https://www.youtube.com”>Youtube </a>

content

#4 type the content.

<a href=“https://www.youtube.com”>Youtube </a>

Ending
tag

#5 type the ending

tag if it has.
let’s do attribute
hunting!
Tell the attributes that
you can see!
 space space space

The tag can have multiple attributes, this

attributes are separated by spaces
Some attributes does not
have a value
Try to search attributes in
the notepad