Home Website Builder Logic Battle Card RPG Godot Tutorials Linux Gaming Blog NodeJS + Postgres LAMP Stack HTML CSS PHP ReactJS VR Tech Blog PHP Fiddle

Intro to HTML: Attribute

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.

What are attributes?

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.

Psuedo Code:

  <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.

Example Page


<!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>

        

Example Attributes:


➼ <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.