html basics: section 4 basic tags
TRANSCRIPT
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.
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.
<p Tag(Paragraph)
Write this out in
your Text File.
Paragraph tags can contain as much or as
little content as your chose.
Try It:- Copy/Paste this
sample in your replit space.
- Add another <p> below the first one with some new content.
You can also create multiple <p> tags, and HTML will auto-format them for
you.
The attribute inside a <p> 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 <b> tag mean?- What does the <i> 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<br/> & <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?
Copy/Paste your last sample and add
this the body section.
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
Copy/Paste your last sample and add
this the body section.
We can also adjust text using subscript and superscript tags.
Test this code. What happens to the content?Describe the changes of <big></big> &
<small></small> tags.
Copy/Paste your last sample and add
this the body section.
In website design, using
changes to text size and
emphasis helps in guide the
user in navigating content.
Test this code.
Using the <sub></sub> and <sup></sup> 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/>
<p> (x4)<big><br/><b><i>
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.