It begins with stating the importance of opening and closing the code with <html> tags. This was demonstrated using what I think was a joke. It was lost on me but I thought I would share it in case it’s actually hilarious:
In the beginning, I wasn’t tested much but given lots of information and encouraged to play around with pieces of the code to see what happens. Advised that HTML tags have to be nested, I learnt that you cannot close any other tag until you close the last tag you started.
I was asked to think about what <p> could mean, and for the first time on my Codecademy journey, I actually knew something! As mentioned, this blog requires (very) basic use of HTML, including <p> and </p> to separate paragraphs.
HTML documents contain two important parts – head and body. Code held within the <head> tags is information about the document not shown on screen. <Body> contains everything else to be displayed as part of the web page. Starting with the head, I added a <title> to be displayed in the menu bar of the browser window. Headings for the body were introduced with tags <h1> up to <h6>. Keen as ever, when prompted to use h1 to h3, I took it a little further and tried out all six, even adding some plain text to see how it compares. H1 is the largest heading going down to h6, which is actually smaller than plain text.
Next on the curriculum were hyperlinks. As you may have noticed in previous blogs, I have some experience with these using <a href=”web address”>text displayed as link</a>. However, Codecademy explained the different elements and their importance. On its own, the <a> tag doesn’t do much at all, to create a working link you need to add attributes. Attributes provide extra information for the tag. For links, the extra information required is a web address, which is marked with the href attribute. Other useful attributes for links are title and target=”_blank”. Title adds a description to links which is displayed when hovering over the link. Target=”_blank” makes the link open in a separate window/tab.
Adding an image was next on the agenda using the <img /> tag, the / goes in the opening tag because, as no text needs to be contained, it doesn’t require a closing tag. Images also use attributes; src represents the source of the picture, height and width allow size manipulation and align is used to position the image left, right or centre. Combining images and links is something I have wondered about for a while and it seems so obvious now it has been explained. Simply surround the <img /> tag with <a> tags! I’ve given it a try with the pictures on this blog.
Eager to put my newfound skills into practice, I embarked upon the first HTML project – Build Your First Webpage. To begin, I laid out the structure with html, head, title and body tags. It was to be named My Week 13 Project, relating to where it appears in the Code Year initiative. After adding headings, paragraphs and links, the webpage is finished off with a right-aligned image. See the completed webpage below.
During this course and project, I noticed more than ever how simply everything is explained. It is clearly designed to be accessible to children, without being too patronising to adults. Plus, I don’t think I’ll ever be too old to enjoy earning points and badges!
Having warmed to HTML and the ways I can use it daily, I’m going to continue with the next HTML course. The tutorials cover further essentials including lists, styles and tables in preparation for the Recipe Card project.