HTML Elements

Jun 24, 2017 The Village Geek Build Site, HTML, Introduction, Javascript, PHP Comment(s)

HTML Elements

This tutorial is part of the Build Your Own Site tutorial series.

If you need a reminder of what HTML is all about; please refer back to the Creating our First Page tutorial for a refresher.

In this tutorial we'll be looking at the various html elements available for us to use. We won't have the chance to look at all the HTML elements on the web, just a few well known ones.

Here Goes:

Navigate to the index.php file that we played with when setting up our web development environments. Open this file with your installation of Sublime Text. In windows this file should be located here : C:/xampp/htdocs and is named index.html or index.php. And in Mac OSX it would be here : /Applications/XAMPP/xamppfiles/htdocs and is also named index.html or index.php The index file would be in /var/www/html on Ubuntu operating systems and is named accordingly.

Don't worry, take your time and search for the file. I'll wait :) ... Found it?

Now create another file in the same folder, and name it back-up.html . Be sure to save it. Now carefully copy all the contents of the index.html file, and paste them in the back-up.html file. Be sure to save :)

It's okay let that heart-beat go wild, you've just begun something on the brave side of things, you'll get used to it after you've wrtitten a few more lines. A little practice, that's all :)

Once saved, go ahead and delete everything in the index file, such that there's nothing in the file. Be sure to save the file after deleting. At this point you should have a full back-up.html file and an empty index.html file. Please take your time to check if this is so. Remember Ctrl + Z is a writer's best friend :) Now in the index.html copy and paste this piece of HTML code:

<!DOCTYPE html>
<html>
   <head>
    <title>Page Title</title>
    </head>
    <body>

    <p>Hello World!</p>

    </body>
</html>

That's right, it just got real ... You've just announced yourself to the world (Well Again). This is an old programmer's tradition. The first thing we write is "Hello World!". Because it's some sort of announcement and celebratory proclamation that we've just begun our journey. That we're here!! We've just arrived!! But mostly, it's just tradition ...

Alright ... Okay ... My Dev!!

Open your browser and load this url : http://localhost/ You should now see a clean white page, boasting only your Hello World! Text. We've talked about the paragraph tag, but we'll revisit it again here so you can actually play with it now. Go ahead and add more text in there, save and reload the page. You'll see your text rendered on the browser again. You can even add other paragraphs in there like so:

<p> This is the first paragraph</p>
<p> This is another paragraph!! </p>
<p>  .... And another!  </p>

Essentially the Paragraph tag is used to display text in the browser. Please note that text can be put in other elements, it's just more acceptable to use the Paragraph because that's what it was made for. Later on we'll show you neat ways to manipulate this text so that it's pretty and bold, and colourful and hued etc. We are now moving onto another HTML element called the Button ... ( yep :) ... that obvious ). A Button is witten like the HTML below, and is used for user interactions that require pressing a button to perform some sort of action. Like submitting a contact us form, saving a post on facebook etc.

<button>press me</button>

Copy the button :

<button type="button">Click Me!</button>

And paste it under the paragraph element/tag in our index.html file. Save and reload the page : http://localhost/ You'll now see the button. You can click it, but it won't do anything yet. that is the next part!

Take a break, go lick a stamp and write an affectionate letter to your favourite person.

Alright, alright, alright ... Welcome back :)

Replace that button with this button:

<button type="button" onclick="alert('Hello world!')">
   Click Me!
</button>

Save, Reload the page :http://localhost/, click the button and voi-flippin-laa!! The button is talking to you ! Well it's saying "Hello World!" but yeh it's talking. Every HTML element has attributes. These are properties of the element that you can manipulate, change or remove. They define how the element reacts to certain events, sort of the element's character and identity. For the button, the onclick attribute runs some javascript which makes that pop-up you see. That pop-up is called an alert in Javascript, don't worry your preciuos heart about it at this point. We'll get deeper into Javascript later on. For now, be happy that you're getting buttons responding; this is a huge leap :) The next element we'll look at is the Header element. It looks like this :

<h1>Heading 1 Dev!</h1>

Copy this Header and paste it under the button element, save, and reload the page : http://localhost/ Do you see the Heading? ... yebo we're in there. We use Headers as headings for different sections of the site or documents #Obviuos! There are six different Header elements, varying by size form H1 to H6 To Illustrate how they differ, copy this piece of code and paste under the H1 :

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

"There are six different headings, varying by size form H1 to H6"
The Village Geek

We'll continue with these elements in the next Tutorial ... Adios Amigo ...

Stay you or be better ... All love!

Cape Town, South Africa

Tutorials

Categories

TUTORIAL HTML Elements

HTML Elements

Reply to this discussion