(watch this video in a new tab or window)
Here are some standard tags
nav is for menu navigation
h1 is for the first heading
h2 is for the second heading, and so on
For semantic reasons you should never have an h2 without an h1 first
section is for a section
article is for an article within a section
(watch this video in a new tab or window)
Using proper indenting while writing code is very important. It's easy to figure where you're at and what's going on with small pages but start throwing some PHP and Javascript in there and crank up the number of lines in the thousands and you'll understand what I mean.
I like to use two spaces for indenting. Some people use tabs and that's OK too. Whatever you choose, be consistent.
(watch this video in a new tab or window)
To view your HTML or the HTML on someone else's page use the inspect HTML option. With Safari you have to turn it on first. Safari...Preferences...Advanced...CHECK in 'Show Develop menu in menu bar'.
I also use Google Chrome. Right-click...inspect.
One of my favorite ways to view code is in a new window. With Google Chrome, option/command/u (all at the same time).
Firefox and Opera also have options to inspect code. I suppose IE may have it too, but I'm not an IE fan.
(watch this video in a new tab or window)
After you upload your video to YouTube, Vimeo, or some other video streaming service, you can usually embed it into your web page. YouTube actually gives you the code to embed it. When you do this, your video is still stored on YouTube's servers (their cloud) and streams to the user's computer from their site, even though they're on your site. Pretty cool, eh? I usually warn against including info from other sites but I definitely make the exception when it comes to videos. Having previously managed a video player on my own site, I can tell you it's something that I don't miss at all.
I created a wrapper around the videos used in our class using CSS. You're welcome to steal my code, but you'll need to figure out how to use it on your own.
(watch this video in a new tab or window)
The problem with including someone else's library or code in your web page is that you're relying on their service to be up and running and for there site to never go away. You can download other people's information as well. Unfortunately, it's often very bloated (large files) and you end up slowing down your user's experience with a bunch of code that you're not even using.
(watch this video in a new tab or window)
Every web designer needs to understand photos and the web.
The file size for photos need to be relatively small and need to fit on the page.
This is a photo taken on a Nikon D5500 at 6000 x 4000 which means it's 6000 pixels wide by 4000 pixels high; which is way too big for the web.
The RAW (.NEF) version is over 30MB and the JPG version is over 13MB.
A good general rule is to keep web photos below .5MB.
To do that, we'll keep the width of our images no more than 1024px wide.
Before manipulating the image, I'm going to duplicate (or copy) it and rename it.
I'm using a basic image editor called Preview that comes with a Mac, to change the size of the web version of the image.
Tools...Adjust size
If I change the size to 1024, you can see that it will be 114KB or .1MB.
If you uncheck the 'scale proportionally' option, you could stretch the image.
Please, please, please, don't use stretched images.
Let's put the image on a web page, by connecting to the server, copying the image,
and adding html to a web page to display it.
Just for fun now let's create a photo that's 1024 x 200.
First I'll open up the image with Preview, command c to copy it.
I'm going to use a program called Pixelmator to do the sizing.
File...New...enter in 1024 and 200...paste...zoom out...drag the corners to resize it
Some programs stretch images when you do this, Pixelmator does not.
...zoom in, and move it to where you want it
...ok...File...Export
I like jpg's for photos, this one is less than 58KB, tiny.
Let's put it on a web page, and voila, there you go.
(watch this video in a new tab or window)
My pet peeves? I'm not going to say much more than read my pet peeves. If I had to highlight my top four for the classes that I teach it would be spelling, consistency, broken images, and untested responsive design (we'll get to it later in the class). My last really big pet peeve doesn't really relate directly to our class as much, it's maintainability. There's not much worse than going to a web site and seeing 'upcoming' information for something that weeks, months, or even years old. It removes all validity to the web site. Before you start something, make sure you can finish it; with a website, that means maintaining it.
<!doctype html>
<html lang="en">
<head>
<title>Shows on the tab</title>
</head>
<body>
This is a very basic web page with just a little bit of html
<p>
I did an internet search for "html bold" and found out how to use a <b>bold tag</b>
</p>
<p>
I also learned how to create an ordered list
<ol>
<li>Item 1
<li>Item 2
<li>Item 3
</ol>
</p>
</body>
</html>
I did an internet search for "html bold" and found out how to use a bold tag
I also learned how to create an ordered list
<table style="border: 1px solid black;">
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
<tr><td>something</td><td>another thing</td><td>third thing</td></tr>
<tr><td>like my sample?</td><td>yes</td><td>no</td></tr>
<tr><td>tr stands for table row</td><td>th stands for table header which is like table data</td><td>td stands for table data</td></tr>
</table>
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| something | another thing | third thing |
| like my sample? | yes | no |
| tr stands for table row | th stands for table header which is like table data | td stands for table data |
<img src="img/SampleImage.jpg" alt="Sample Image" style="width:90%;">
Remember to check Kirk's Pet Peeves, it will affect your grade