(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)
I hope you enjoy this rather long supplemental/bonus material.
(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
(watch this video in a new tab or window)
Let's walk through Web Page 02 together. On line 1 I have a doctype of HTML. On line 2 I have an HTML opening tag where I set the language equal to english, and I have the HTML ending tag at the bottom of the document. Lines 3 through 31 is my head element (or tag). Line 4 sets the character set to utf dash 8. Lines 5 through 7 sets some meta tags. Line 8 has my title. Lines 9 through 30 contains my internal styling. Lines 32 through 162 is my body element (or tag). I then have an h1 type element with Kirk's Web Page 02. Next I have a break. I thought that would be a good spot to tell you about some HTML terminology.
(1:15) HTML terminology. H1 is the opening tag. Slash H1 is the closing tag. Kirk's Web Page 02 is the content. All of that together make it an element (which I generally call a tag). Now I'll remove that terminology section.
(1:54) CSS terminology. CSS is Cascading Style Sheets. Spacing doesn't matter too much for CSS to function but does matter for readability. P is called the selector. P stands for paragraph so you could also call it a Type Selector since it's an HTML element. The curly brackets or curly braces make up the Declaration for one line or Declaration Block for multiple lines/items. In this case, 'color' is the property. The colon separates the property from the value. In this case the pound 010101 is the value. The semi-colon ends the value and separates properties/values from each other. You should end each property/value set with a semi-colon. All of it together make up a 'Rule Set'. The preceding dot indicates a Class Selector. The preceding pound or hashtag sign indicates an ID Selector. A star indicates a Universal Selector. Things in brackets indicate an Attribute Selector. Text after a colon in the selector are called a Pseudo-Class. There are more, but that's mostly what I want to cover at this point. I typically just refer to all of this as CSS.
(4:58) Line 35 now has an H1 with 'Class photo from spring 2020' in it. Line 36 has an image. I use a relative path with the folder name of SampleImages. The file name in this case is 202120_IMS_class_photo.jpg (the image is a file type of jpg). There needs to be a matching folder and image in the web space to make this display correctly when using a web browser to view the web page. Image names should not have a space in them. Alt text should describe the image (for a screen reader) and should have spaces in it. I added some styling to make it responsive. I finished my line with a break. Let's refresh the browser to look at the page. I like to temporarily add text to my code and reload the page to verify that I know what I'm working on. Div stands for Division. P stands for Paragraph. H1 is a main heading element (or tag). I have a bold tag. I have another paragraph with subscript, superscript, and italics in it. I have an ordered list and an unordered list. Lists can have closing list item tags but the do not have to have them. Ordered lists get auto-generated numbers. Unordered or un-numbered lists get bullet points. You can have H1 up to H6. They should be semantically sound. Next I have a table with 3 columns. The first table row (tr) has table headers (th) and the rest of the rows have table datas (td). Then I close the body and the html (in that order). Save it and reload the page on the browser all using keyboard shortcuts.
(8:08) Styling for the table and other parts of my page are done at the top with internal styling. I recommend playing around with some of these numbers to learn how styling works. Make one change and reload the page to see what changed. Then repeat. I'll test with changing my table padding from 2em to 12 em (pronounced 'm') and see that there is a lot more space around the table. I have styling for the body element (or tag), for the table, for the table data and table header (share some of the same styling), and some additional unique styling for the table header, and for the paragraph. Color is for the text color and background is for the background color.
(9:03) Let's have a little more fun by adding an image. I'll start off with img src and alt as a place holder, and I'll put a break after it. I'll open up a new window and get the image that I saved in my downloads folder. I'll edit the image with an image editor. I'll crop it to remove part of the picture that I don't want, then resize it to 1000 pixels wide, then make some final height cropping adjustments. Next I'll save the new image by exporting it in jpg format for use on the web. Spaces in file names for the web are bad, so I'll save my image as Gretsch underscore Energy underscore drumset, using underscores in place of spaces. Next, I need a place to put it in my web space so I'll make a folder called Web Page 02 underscore images. Then I copy my new image to my web space. Then I'll repeat these steps with another image. Then I'll add HTML to the web page to display the image and describe my image with alt text. Use keyboard shortcuts to save the changes, tab over to the browser, reload the page and verify that the image is displayed correctly. In my text editor, I'll copy that line of code and change the data to make the next image show up on the site. I like to copy/paste file names so I don't have problems with mis-spellings (i.e. typo's). I'll add a break between the images to make them stack one on top of the other. Next I'll add some img styling to the internal styling section at the top of my document to display the image responsively. These changes do not affect the actual image, only how it is displayed. You can see when I try to add margins that I have problems. I left that in the video to show how coding in real life works and how I used the web (and W3Schools to solve the problem) when I tried to center my images. When I change the width of the window, you can see that ultimately my images are centered and responsive (get smaller as I shrink the width of the window). Next I will work on consistency with my code by using the same spacing in my internal styling. I decided to remove extraneous spaces between the properties and the values. Finally, I will change the 80% to 70% just to verify that the page changes.
(18:53) If you're stealing my code, make sure you change what's on the page, I want to know that you understand how HTML (and in the future, how CSS) works. Change the code, use your shortcut keys to save it, tab over to your browser, reload the page, tab back to your text editor and repeat. Try to only use keyboard shortcuts. That was a lot to take in. Re-watch the video if you missed anything or just need a refresher. I hope you found this useful.