Lab 0 HTML Basics
Goal
- Create new html files in Visual Studio Code
- Practice using basic HTML tags, meta tags, paragraph tags, heading tags
- Get setup in GitHub
- Try out W3C validator
- Let your instructor get to know you.
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
- Opening tag: This consists of the name of the element (in this example, p for paragraph), wrapped in opening and closing angle brackets. This opening tag marks where the element begins or starts to take effect.
- Content: This is the content of the element. In this example, it is the paragraph text.
- Closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This marks where the element ends. Failing to include a closing tag is a common beginner error that can result in validation errors.
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.
<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
- Avoid using heading tags to resize text. Instead, use the CSS font-size property. Headings use size to indicate their relative importance, but CSS is preferred for general-purpose resizing.
- Avoid skipping heading levels: always start from
<h1>, next use<h2>and so on. - You should only use one
<h1>per page. Using more than one will not result in an error, but using only one is seen as a best practice. It makes logical sense an<h1>is the most important heading, and tells you what the purpose of the overall page is. You wouldn't have a book with more than one title, or a movie with more than one name! Having a single top-level title is also arguably better for screen reader users, and SEO.
HTML
Preview
<p> - Paragraph tag element is a block element that defines a paragraph.
HTML
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.
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
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
Preview
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
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.
Create a new folder inside the cs-318 folder called 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.
Add the following html tags that are needed to start a web page: Doctype, html, head, title, and body (should look like image below)
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)
- First meta element will use the charaset attribute to indicate the character encoding
- The second meta element will use the viewport attribute which gives the browser instructions on how to control the page's dimensions and scaling
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)
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
Example of HTML Code
Example of Code Rendered in Chrome
Final Steps
Validate your HTML.
- Navigate to W3C Validator
- Select the validate by file upload tab at the top of the page
- Click on choose file and select your lab0.html file
- If the report comes back with no errors, you are finished with this exercise. If you have errors correct them.
Now look at GitHub Desktop. You should see all of your files listed out in the left column.
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.
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"
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.
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.