HTML Basics: Section 4 Basic Tags

Basic TagsHTML Basics: Section 4

IMPORTANT INFORMATION:

For this lesson, you will need to complete your work in a Text Editor.

Please remember to save your work.

DISCLAIMER:

Try not to copy and paste, if you can.

One of the keys to picking up a programming language (when you are first learning) is manually typing out code.

Yes, it might not make sense at first - but this mechanical process does allow your brain to begin processing the information in a way that it will understand.

With more practice, your brain will begin to understand the concepts and logic involved with programming. It’s at that point where programming becomes less about the code,

and more about the logic and problem solving.

Tags are code that we write for HTML. In these tags we can create content,

structures, etc. that help to create the layout of a website.

For this section, you will write out your

code samples in a Text File.

The Text File is what you will hand in.

At this point, you can also create an account

at replit.com

This is the space we will use to test our code

samples.

As well, this space allows you to save and

edit code samples/files. You can even Copy/Paste code from your Text File

here.

Reminder:You are required to write your code in a Text File first. This way you will always have a backup of your

work.

http://www.replit.com/

A meta tag allows us to store

information about our website.

These tags reside in the <head>

section.

<meta Tag(Head Section)

Write this out in

your Text File.

The charset meta tag allows us to define

and tell web browsers the types

of characters (character set) we are using in our website. UTF-8 is one of the most common character

sets.

The name meta tag allows for the addition of

information about our website. This often where search engines will pull

information from or how data about

websites are stored for cataloguing or

referencing.

Important Note:The code that we

pass after the tags are referred to as

properties or attributes. These

allow the developer to pass along

specific information through the assigned

tags.

Header or Heading tags are use for titles on a webpage. They have

some prebuilt settings

such as size and

boldness.

<h# Tag(Heading Tags)

<Body> TagsTags that define the

body region. This is

where the content of a

website goes.

Write this out in

your Text File.

Header tags range from

1 to 6.

Try It:Copy/Paste this sample in your replit space. What happens?

Try changing the number in your <h> tag. What happens as you cycle through 1 to 6? Make a note of this in your file.

For general content and writing on

your website,

you can use the

paragraph tag.

 below the first one with some new content.

You can also create multiple tags, and HTML will auto-format them for

you.

The attribute inside a tag can be changed by adding more

tags.

Tagsin

ParagraphsCopy/Paste your last

sample and add this the body section.

We can also embed both tags into the same attribute.

- What happens when you test this code?- What does the tag mean?- What does the tag mean?

Copy/Paste your last sample and add this the

body section.Important Reminde

r:

The order of the tags in your code

is how

it will display on your website.

Creating white space is an

effective design and organization

technique.

Break Tags & <hr/>

Copy/Paste your last sample and add

this the body section.

We can also create breaks using horizontal lines.

Test this code. What happens to the content?



In web development,

it’s important also keep in mind the end

product. Writing clean, efficient

code doesn’t always translate to a clean user

experience.

Test this code. What happens to the content?

You can use as many break tags as needed throughout your build.

All HTML tags have a pre-set

text size. However, we can change these

settings using a couple of extra

tags.

Sizing Tags



We can also adjust text using subscript and superscript tags.

Test this code. What happens to the content?Describe the changes of <big></big> &

 tags.



In website design, using

changes to text size and

emphasis helps in guide the

user in navigating content.

Test this code.

Using the and tags are great for things like equations or fine

print in a document.Don’t forget

to

write your tags

in pairs!

Important toRemember:When HTML was created all websites were text based. Images and

animations were not common at

all.

As a result, there are a wide variety of tags available in the HTML library.

If you want to see all the different structures available in

HTML, check out:www.w3schools.com

Source:HTML Basics Series by Mike Dane

Practice:

Create an HTML structure that uses the following:

<h1><h3><hr/>

 (x4)<big> 

Comments

Content of the structure is completely up to you.

Pro Tip:Try working out your structure in a Text File and Copy/Paste over to replit to test it out for bugs

or errors.

http://www.w3schools.com/

https://www.youtube.com/watch?v=YTxrjJS6rpE&list=PLLAZ4kZ9dFpMSXUYwxDFOvyxlssug29Fu&index=4

https://www.youtube.com/watch?v=YTxrjJS6rpE&list=PLLAZ4kZ9dFpMSXUYwxDFOvyxlssug29Fu&index=4

Documents

HTML Basics: Section 4 Basic Tags