An HTML attribute changes something about an HTML element. It may be a formatting or a functionality change.
At the bottom of this page there is a code editor pre-loaded with the lesson's code.If you have been following the Coding Commanders tutorial, you have already encountered attributes. Attributes are placed inside an element tag and set equal to a value. The value is put in quotes.
<element attribute = "value"> You can use signle or double quotes. If you save your file as .html, the code editor may give you an error message when you use single quotes. If you save your file as .php, it shouldn't give error messages. And, either way the code should work.
<!DOCTYPE html>
<html>
<head>
<!-- Page Title-->
<title>Coding Commanders</title>
</head>
<!-- Main Content Area-->
<body>
<!-- Navigation-->
<nav>
<!-- Links List-->
<ul style='list-style-type:none'>
<label>Social Media</label>
<li><a href ='https://www.youtube.com/channel/UC-gCUMK_EGUqJ7P9VA7BJmQ'>YouTube</a></li>
<li><a href='https://www.facebook.com/codingcommanders/'>Facebook</a></li>
<li><a href='https://www.instagram.com/codingcommanders'>Instagram</a></li>
<li><a href='https://github.com/codingCommanders/'>GitHub</a></li>
</ul>
</nav>
<!-- Heading-->
<h1 align = 'center'>Coding Commanders: Erraticating Bugs Since 2017</h1>
<!-- Content Container-->
<div align = 'center'>
<!-- Image-->
<img width = "400" src="http://i65.tinypic.com/f3nfk.png">
<!-- Paragraph-->
<p style = "font-size:150%;">We need you to help us debug Earth. With LAMP stack on our side,
the bugs don't stand a chance!</p>
</div>
</body>
</html>
➼ <ul> style attribute The unordered list is set to have have
no bullet points. (more on this on the list lesson.)
➼ <a> href attribute Each navigation link must have an href
attribute. This is set equal to the page you want the link to navigate to. It can be a web address or a file name. (more on
href on the navigation lesson.)
➼ align attribute In this example, a <div> container and <h1> heading
are set to align center.
➼ <img> width attribute This will size the image.
In this example the width vaule is set to 400. This image will display with a width of 400 pixels.
➼ <img> src attribute The src attributes specifies the location
of the image. It's value can be a web address or file location. (more on image src on the media lesson)
➼ <p> style attribute In this example we are changeing the font size
to 150% the default size.
Run the code in the code editor box below. Then, play around with the attributes and observe how the output changes.