Computer Science 318


Fundamentals of Web Design

Lab 0 HTML Basics


Goal

Learn

HTML: HyperText Markup Language

HTML tells web browsers how to structure the web pages you visit. It is the building blocks of a web page, that consists of elements used to wrap or contain different bits of content to make the browser display it in a certain way.

HTML Element Anatomy

HTML Element Anatomy breakdown of a paragraph element.

Definitions of HTML Tags

<!DOCTYPE html> - In HTML, the doctype is the required <!DOCTYPE html> preamble found at the top of all documents. Its sole purpose is to prevent a browser from switching into so-called “quirks mode” when rendering a document; that is, the <!DOCTYPE html> doctype ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications.

<html lang="en"> - This element wraps all the content on the entire page and is sometimes known as the root element. It also includes the lang attribute, setting the primary language of the document.

<head> - Head tag element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.

<body> - Element represents the content of an HTML document. There can be only one <body> element in a document.

Human skeleton with comparisons to HTML tags

<meta name="viewport" content="width=device-width, initial-scale=1.0"> - Tells the browser to make web page responsive to the device's screen width.

<meta charset="UTF-8"> - Indicates character encoding to the browser. Though most browsers will default to UTF-8 even if it is not indicated in the HTML code.

<title> - Title tag element defines the document's title that is shown in a browser's title bar or a page's tab. It only contains text; tags within the element are ignored. It is always within the <head> tag.

<h1>-<h6>- Heading tags elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.

Do's and Don'ts Heading Tags

HTML

<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>

Preview

<p> - Paragraph tag element is a block element that defines a paragraph.

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis pellentesque id nibh tortor. Congue mauris rhoncus aenean vel elit. Amet volutpat consequat mauris nunc congue nisi vitae suscipit tellus. Non odio euismod lacinia at quis risus sed vulputate. In eu mi bibendum neque egestas. Hendrerit dolor magna eget est lorem ipsum dolor sit amet.</p> <p>Amet facilisis magna etiam tempor. Ullamcorper velit sed ullamcorper morbi. Blandit aliquam etiam erat velit scelerisque in dictum non. Vitae semper quis lectus nulla at volutpat. Quis eleifend quam adipiscing vitae. Faucibus pulvinar elementum integer enim neque volutpat ac tincidunt vitae. Dictum non consectetur a erat nam at lectus. Diam ut venenatis tellus in metus vulputate eu scelerisque felis. Cras sed felis eget velit. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque.</p>

Preview

GitHub

GitHub is a platform where you can host public and private repositories for free and collaborate with others on the same repository.

Basic Git Terminology

Git
Is a version control software, which means it manages changes to a project without overwriting any part of that project. Git is made up of commands.

Repository or repo
Is a directory or storage space where your projects can live. You can keep code files, text files, image files, you name it, inside a repository.

Commit
Is the command that gives Git its power. When you commit, you are taking a “snapshot” of your repository at that point in time, giving you a checkpoint to which you can reevaluate or restore your project to any previous state. Basically a version history.

Push
When working on your local computer, and want your commits to be visible online on GitHub as well, you “push” the changes up to GitHub with this command.

Pull
When working on your local computer and want the most up-to-date version of your repository to work with, you “pull” the changes down from GitHub with this command.

Clone
This is when you want to work on your repo file on your local computer. You clone or copy the repository from GitHub to your computer.

Github push pull diagram

We will be utilizing GitHub Desktop a program which turns using Git from a 90s hacker's experience to a non-coder friendly experience.

Validator

W3C Validator

This is tool to check your HTML for errors.

Practice

Experiment Take a look at the demonstration below in the left column you have a paragraph element that is surrounding the content. The browser then renders this, as you can see in the preview on the right. Try editing the content to see it change in the preview area. Also, try adding in some headings to the demo below.

HTML

<p>The cow jumped over the moon.</p>

Preview

Setup Your GitHub Account

Click on the desktop shortcut for GitHub Desktop (this will install GitHub desktop for you). If you are on your own computer go to GitHub Desktop and download GitHub Desktop. (free software)

Sign in to your GitHub account

GitHub Start up

Click on your cs-318 repository and then click the Clone button. This will create a folder with all of your files that are in the repository, but more importantly it is going to keep track of changes you make and compare it to your repository online.

From GitHub Desktop click Open in Visual Studio Code.

GitHub open in VSC

Create a new folder inside the cs-318 folder called Lab0.

GitHub lab0

Click on the Lab0 folder so it is highlighted. Then click new file. Create a new file called index.html.
We use index.html as the filename for any document that contains homepage content, that is, the text and images that people see when they first go to a website.

GitHub lab0 index page

Add the following html tags that are needed to start a web page: Doctype, html, head, title, and body (should look like image below)

Lab0 HTML setup

Save file again and make sure to periodically save to prevent losing progress.
Hint: The shortcut to save is Command + S (Mac) or Crtl + S (Windows).

Now we are gonna take a look at the file in the browser. Open the browser of your choice; Chrome, Firefox, Edge. Now drag the file name from the Visual Studio Code window into the browser tab. Voilà you are viewing your file live!
Hint: Every time you save your HTML file from here on out you will need to refresh (Command + R or Crtl + R) your browser window to see any changes.

Inside the opening HTML tag add the lang attribute lang="" to indicate that the spoken language of the site is English

Add two meta elements into the head tag (note meta elements are self-contained tags and do not need closing tags)

Inside the title tag add "Your Name" (At this point your code should look like the image below and your browser should look like the 2nd image)

HTML basics with a title tag and meta tags

Browser view of HTML basics with a title tag and meta tags

Now you will begin to work inside of the body.

Add a <h1> tag with your name again in the tag

Optional, add a <p> tag with your pronouns if you would like

Add a <h2> tag with your major in the tag

Add a <p> tag with a sentence describing your dream job

Add a <h3> tag with your year (freshman, sophomore, junior, senior)

Add <p> tag with a 2-3 sentence paragraph about what you hope to get out of or learn in this class

Add a <h4> tag with the title "My Favorite Things"

Add a <p> tag with a paragraph about at least two of your favorite things

HTML with various text tags Example of HTML Code

Lab 0 rendered in the browser Example of Code Rendered in Chrome

Final Steps

Validate your HTML.

Now look at GitHub Desktop. You should see all of your files listed out in the left column.

GitHub Desktop files listed You will have only one file.

Now you are going to commit your changes.

With all of the files checked. Fill out the Summary field in the bottom left and then click Commit to main.
Committing is staging the files, so they can be pushed to the repository hosted at GitHub.

GitHub Desktop Summary field.

Now you want to push your changes to the Repository. Now if you access the repository from another computer Lab0 will be there. After you push in the top right of the nav it should say "Fetch Origin" instead of "Push Origin"

GitHub Push Origin

Your are Done with Lab0

Are you someone who needs to double check that it worked? If you want to make sure the push was successful click on the "View on GitHub" button from GitHub Desktop. It will open up your repository in the browser. From there you should be able to see all of your files.

...What if I need to make a change after pushing?

So let's say you have already pushed but noticed an error. No worries, this is easy to fix.

In visual studio code make any changes you need to. Once you are done making corrections. Save.

Go back to GitHub Desktop. You should see your changes to the documents listed there.

GitHub fixing an error.

Fill out the Summary field again. I suggest saying what you fixed. For example: "Fixed paragraph error on Sea-Jellies"

Click "Commit to main"

Click "Push Origin" and you are done.