Building the HTML
Overview
Daniel Scott
Founder of Bring Your Own Laptop & Chief Instructor
instructorI discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
So we're going to put in the Heading. Where are we going to put it? Now, we've got our Header here that contains my Logo and my Navigation. See those three little buttons there? Then we got this other chunk, which is Main. Main is kind of middle part of the website, Header is generally just our Logo and Navigation. So Main here, already has my Hero Box, and that is the big pink box that I've created already. It's this guy here. So, inside of there is where I want my Heading.
We're going to be designing this Heading here, which says "roarX, Pre-order now." So to put in a Heading, we need to put in something called H1. H1 is our Heading1, and the Heading1 is the most important heading on our page. So the syntax works like this, just like, say this Main here, it says 'main', and it's inside these angle brackets '< >'. Then there's a </main> to close that off. So we need to do the same thing for our H1. So angle brackets '< >', down by your M key. Type in 'H1', then close it off. So that's the beginning part, just like Main here. You can see, the second part, it's the same word but it has a forward slash '/' in front of it. So, we're going to type in angle brackets, forward slash '</' and helpful old Dreamweaver has gone and filled that in for us. That's one of the perks of Dreamweaver.
The text goes inside. Goes in the middle of these two here, so have your cursor flashing between the two tags. And we're going to type in 'roarX' which is the name of our new bike that we're launching. And we're going to say 'Pre-order', please. Or "pre-order now'. Hit 'Save', so 'File', 'Save'. And I want you to go and check your real time browser preview. Now you can check back by flipping back to Chrome it updates automatically or if you'd like to, you can click down here and click on 'Google Chrome' again. Either way, let's get to our browser. You can see here, there's my H1. 'roarX, Pre-order now'. And by default it is black and bold, and a particular size.
And that my friends is our first bit of HTML. If you're new to Web Design, well done, this is our first bit of Coding, you've done it. Next thing we need to do though is go and change these default colors, and sizes, and fonts to something that matches our mock-up in Photoshop. So let's go and do that now, learning something called CSS.