Embedded Files
Building a homepage
Building a homepage
I started the lesson by copying the 'About' page and removing the <section> HTML. This was so that I could keep the same header and footer on the homepage.
I added a <button> to the page header. I also added a second button with a 'Play' symbol, using an entity code (► - discussed below). I added a line break between both buttons with <br> (since <button> is an inline element).
The homepage will eventually contain a large, header image. Rather than do that now, I added a comment to remind me to do it later (using <!-- --> tags).
More tags to learn
More tags to learn
I created a <section> element for my body content and added <div> elements so that I can create blocked content for each of the tour dates. Then I created a new <div> for each row of tour dates.
Within the <divs> containing tour dates for my fictional band, I added <strong> tags to bold some text. <strong> tags are better for accessibility than <bold> since screenreaders will emphasise content with <strong>.
I then wrapped the city and venue names in <span> tags.
It turns out you can set type of some HTML elements. I set the 'Buy tickets' <button> as type="button".
It looks helpful to temporarily add less than or greater than symbols in between elements - "so that you can see which element is which as you edit the page"!
I copied this embedded <div> tag four times, et voila I had a list of gigs and venues.
I finished up by added a few more tags to the <head> section. These included a <title> tag, so that I can name the page, and a <meta> tag, which if this were a real page, would appear as a description underneath my Google result.
Some other things I learned
Some other things I learned
Entity numbers. I already knew that some characters can't be used in HTML (eg for space).
Meaningless elements. I'm unsure what makes them "meaningless". I think it's because they can appear anywhere in the code, not necessarily in a <header> or <body> tag. There are two types:
<div> - a block element. Will appear as a block with content in between.
<span> - an inline element. Will appear inline with the content around it.
I'm excited to move no from HTML to CSS tomorrow!
Page updated
Google Sites
Report abuse