Scribd
Upload
22 views

Fe Uk 1.1 Intro To HTML

This document provides an introduction to HTML. It outlines the objectives of learning basic HTML including proving completion of prework by installing required software, utilizing basic terminal commands, and creating a basic HTML page. It then reviews the required software and accounts, demonstrates some basic terminal commands, and has students complete activities to practice these skills by creating files and folders using the terminal. The document also introduces some common HTML tags and has students build their first HTML page.

Uploaded by

esochemicals
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

Fe Uk 1.1 Intro To HTML

This document provides an introduction to HTML. It outlines the objectives of learning basic HTML including proving completion of prework by installing required software, utilizing basic terminal commands, and creating a basic HTML page. It then reviews the required software and accounts, demonstrates some basic terminal commands, and has students complete activities to practice these skills by creating files and folders using the terminal. The document also introduces some common HTML tags and has students build their first HTML page.

Uploaded by

esochemicals
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

Intro to HTML

Skills Bootcamp in Front-End Web Development


Lesson 1.1

© 2022 edX Boot Camps LLC. Confidential and Proprietary. All Rights Reserved. 1
WELCOME

2
Today’s Objectives
By the end of the lesson today you will be able to:

Prove you have completed all required prework (software and tools installation).

Utilize basic Terminal/Bash commands.

Create a basic HTML page.

3
Prework

4
Software Checklist
At this point, you should have all of these installed:

Slack

Visual Studio Code

Git

Git Bash (Windows) or Terminal (Mac)

Google Chrome

5
Accounts Checklist
You should also have accounts for:

GitHub (with SSH Integration)

LinkedIn

Stack Overflow

6
Time to Code

Confirm Prework Installed

Suggested Time:
30 minutes
7
Self-Check
Let’s do some quick checks of the following:

Visual Studio Code Check

Git Bash/Terminal Check

Git Check

8
9
Let’s Get Crackin’—Introduction to Console/Bash

10
Instructor Demonstration
Let’s Get Crackin’—Introduction to Console/Bash

11
Let’s Get Crackin’—Introduction to Console/Bash

cd Changes directory rm <FILENAME> Deletes file

Changes to home
cd ~ directory
rm -r <FOLDERNAME> Deletes a folder, note the -r

Moves up one Opens the current folder.


cd .. directory
open . MAC SPECIFIC

opens a specific file—MAC


ls Lists files in folder open <FILENAME> SPECIFIC

Shows current Opens the specific


pwd directory
explorer <FILENAME> file—BASH SPECIFIC

Opens the current


mkdir <FOLDERNAME> Creates new directory explorer . folder—BASH SPECIFIC

touch <FILENAME> Creates a file

12
Activity: Console Commands
From the Terminal/Console and using only the command line, create the following:
● A new folder with the name of first_day_stuff
● A new HTML file with the name of first-day.html
Open the current folder containing the new HTML file.
BONUS:
● Create multiple directories/folders with the names one_folder and second_folder in one
command.
● Create multiple files with the names one.html and two.html in one command in the
first_day_stuff directory.

Suggested Time:
15 minutes

13
Time’s Up! Let’s Review.

14
Webpages

15
Instructor Demonstration
What Webpages Really Look Like

16
HTML stands for Hypertext Markup
Language. While not technically a coding
language, it determines what content and
elements are displayed on a webpage.

17
CSS

HTML CSS
(structure) (presentation)
18
CSS
CSS is technically a selector language, which means it is used to select HTML
elements in order to style them.

“Selector”

HTML elements CSS rules

19
HTML, CSS, JavaScript

HTML CSS JavaScript

Used to write content. Used to format content. Used to create dynamic web applications that
take in user inputs, change what’s displayed to
users, animate elements, and much more.

20
Activity: Examining Wikipedia
In this activity, you'll take a moment to examine/modify a Wikipedia page using
Chrome’s inspector tool.
1. Navigate to any page on Wikipedia and open up the Chrome Inspector tool.
2. Using Inspector, locate the header for the article.
3. Change the header! You can edit it and write something else (please keep it clean).
4. Attempt to find some of the written content on the page and change it around.

Suggested Time:
5 minutes

21
Time’s Up! Let’s Review.

22
Instructor Demonstration
Hello, HTML

23
Activity: My First HTML Page
Time to put these new skills to the test! In this activity, you'll create a new HTML
page from scratch.
1. Create a new HTML document called FirstHTML.html.
2. Give your HTML page the title “My First HTML Page.”
3. Add some text so that your HTML page renders the words “Woohoo!
I just created my first web page!” to the browser.

Suggested Time:
10 minutes

24
Time’s Up! Let’s Review.

25
Instructor Demonstration
A Body of Content

26
Important Common Tags
Headings: Containers: Others:
<h1> </h1> Heading 1 (Largest heading) <html> </html> Wraps the entire page <strong> bold

<h2> </h2> Heading 2 (Next largest heading) <head> </head> Wraps the header of the page <em> emphasis

<h3> </h3> Heading 3 <body> </body> Wraps the main content <img> images

... <div> </div> Logical container <a href> links

Heading 6 (Smallest heading, rarely


<h6> </h6> ever used)
<p> </p> Wraps individual paragraphs <li> list items

<ul> </ul> Defines an unordered list <title> title

<ol> </ol> Defines an ordered list <br> line break

<table> tables

<!-- --> comments

27
Image Types
The JPEG file format is a type of image compression that works best with photographs
JPEG and complex images. JPEGs are great multipurpose files, although designers can run
into issues when working with different browser screen sizes. We'll primarily be using
JPEGs in our program.

PNGs support variable transparency. In other words, users can control the degree to
PNG which the image is transparent. These can be useful when planning or designing
website and application interfaces. But they are less common.

SVG files allow you to create very high-quality graphics and animations that do not
SVG lose detail as their size increases. This means that, with an SVG file, you could create
one graphic that looked great on a tiny mobile phone screen or on a 60-inch computer
monitor. On the downside, these files can be very large.

You know what these are! GIFs have the unique ability to display a sequence of images,
GIF similar to videos. These are called animated GIFs, in which a series of separate GIF
images that are linked together to create motion (animation).

28
Time to Code

Building Up HTML

Suggested Time:
15 minutes
29
Time’s Up! Let’s Review.

30
Questions?

31
32

You might also like