The Basics

Intro to Web Development

Lesson 1: Intro to HTML

# 1

Intro to HTML

Resource Link
Video Lessons
Podcast Lessons
Basics Homepage

Table of Contents

First Steps with HTML

HTML Syntax

I had a piece of toast and a muffin.
<p>I had a piece of toast and a muffin.</p>

<p>

</p>

Text

This text has no markup. Plain text in HTML file.

This text is wrapped with a paragraph tag

Opening Tag

Closing Tag

Create Your First HTML Element

add <p> tags to this piece of text

This is the challenge!

<p> sentence </p>

Click for a hint!

HTML Tags in Action

The Paragraph Tag 

      <p> Content </p>

Heading Tags

     <h1> Content </h1>

Strong & Italic Tags

<strong> Content </strong>   <i> Content </i>

Line Break & Horizontal Tag

content<br/>                    content <hr/>

HTML Tag Challenge!

On the next slide you will see a full page, empty code pen.

Your challenge is to recreate whats on this image.

Feel free to click "Hint" to see a live example.

Steps:

 

Create a heading tag

Create a smaller heading tag

Create a paragraph tag

Use the strong tag

Use the italic tag

Use the horizontal rule tag

Use the line break tag

Instructions:

 

Write your name 

Your Job Title

What do you like to do on Sundays?

What do you like about coding?

Whats one hard thing about coding?

Tell me a joke!

 

Complete the Challenge!

Link Tags

A complete link tag looks like this

<a href="https://www.google.com/">This is a link to Google</a>

The following is the link tag, at it's most basic.

<a></a>
 <a href="URL"> Content </a>

HTML elements can have optional additions, called attributes.  The link tag has a mandatory one called the href

<a href=""></a>

The href is how the element knows where to send the user when the link is clicked

Most attributes are not mandatory, another good one for link tags is the target attribute 

<a href="URL" target="_blank"></a>

This value opens the link in a new tab "_blank"

Link Tag Challenge

 <a href="URL" target="_blank"> Content </a>

Link Tag Review

<a href="URL">Link Title</a>

Attributes

Element End

Element Start

Full URL

What you see on site

<a href="URL" attribute-name="">...

Attribute

Value

Link Attributes

<a href="URL" target="_blank">...</a>

Element End

Attributes

Element Start

Value

Image Attributes

Element End

Attributes

Element Start

Value

<img src="URL" width="400px"/>

Attributes

 <p attribute="value" attribute2="value"> Content </p>

Image Tags

<img src="https://bit.ly/2TdOyRs" width="200px" height="200px"/>

List Tags

 <ol>
  <li>Jersey City</li>
  <li>Hoboken</li>
  <li>Newark</li>
</ol> 
 <ul>
  <li>Queens</li>
  <li>Brooklyn</li>
  <li>Manhattan</li>
</ul> 

Review

HTML Tags Challenge

Advanced Challenge

Resources

Coding Edittor

Helpful Accounts

Browsers

Keep track of all usernames and passwords!

Do not use Internet Explorer!

Homework

Code Academy Course

Code Academy Course

Extras

Free Courses

Paid Courses

Treehouse

LinkedIn

30 Day Free Trial - 30/a month

7 Day Free Trial - 25/a month

Treehouse Courses

LinkedIn Learning Courses

Contact Info

Email: lennyroycodes@gmail.com

Website: lennyroyrobles.com

Social Media: lennyroyroy

GitHub

Codepen | Glitch

The next slide will be the last slide :)

Lesson 2: Intro to CSS

Next Lesson

Lesson 1: Intro to HTML

By lennyroyroy

Lesson 1: Intro to HTML

The Basics: Intro to Web Development

  • 2,567