Meeting #6 (HTML)

First, a quick recap on how to make your website accessible.

Logon to the Linux server, and make sure you are in your home folder (~). Create a new folder called public_html in your home folder if you haven’t already (~/public_html).

Using nano (Terminal) or kate (GUI), create a new file called index.html (kate index.html).

Enter the follow code into it:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html> 

What is all this? The most fundamental concept of HTML is a tag. Tags are the “<p>” and “</p>” you see. If you’ve used, say, Java, tags are a lot like the { and } of HTML. There is an opening tag (<p>), and closing tag (</p> they must be in pairs, notice the /), and the contents inside a tag dictates what the content between should look like.

The HTML and body tags don’t have any visual importance, but they dictate the page structure. The html tag states that the content between the tags is in fact, HTML. The body tag is used to specify content that should be the actual visual content of the website. This isn’t that important right now, but is when we get to more complex websites.

The h1 tag is a header. It basically makes the text inside it be large and bold. There is also the h2, h3, and h4 tags. The increase in number, the smaller the text (basically subheadings).

The p tag simply formats a paragraph or block of text.

HTML has tons of tags. Try these ones out, Just put them within the body tags.

<marquee> This text scrolls </marquee> 

marquee makes the text inside it scroll/move across the page. It’s not used in many sites today but is a fun one to try out.

 <button>Click me</button> 

Buttons are fairly straightforward, and when we start to use JavaScript (it’s like Java or C++ but for the web), the button will be more useful.

 <ul>
  <li>Science</li>
  <li>Math</li>
  <li>English</li>
</ul> 

This one is pretty interesting. The ul tag defines an unordered list. Each li tag inside it is one bullet point in the list.

Tags can also contain something called an attribute. Consider the following example:

<p style="color:blue;">This is blue</p>
<p style="color:red;">This is red.</p> 

Attributes can modify the way a tag is displayed by the browser. Here, the style=”color:blue;” attribute specifies a specific style to be added to the tag it’s in. This styling is called CSS, and we will be learning more about it soon!

 <a href="https://bayview.club">This is a link</a> 

The “a” tag is a link to another website, and it must contain a href attribute, which is the website the link goes to.


And that’s HTML! Well, of course we are just dipping our toes here. There are other tags and attributes the play with, and the real fun starts when we add CSS and JavaScript into the mix. For now, play around with these tags.

As a little challenge, why not try and make your website something interesting. Go ahead and design up a website that describes you, your interests, hobbies, etc. Make it colourful, add lists, headings, and whatever else you see fit.

As a jumping off point, and if you want to learn about some of the other HTML tags, here is w3schools. It’s a great place to learn about web development.

https://www.w3schools.com/html/html_intro.asp

Published by

Computer Club Executives

The account of the Computer Club Executives