HTML and CSS information and project

Информация о документе

Цена	2000UZS
Размер	5.2MB
Покупки	0
Дата загрузки	07 Ноябрь 2026
Расширение	docx
Раздел	Рефераты
Предмет	Педагогика

HTML and CSS information and project

Купить

A tag, for example, looks like this:
<b>SOMETHING</b>
Here,
we’re dealing with a <b> tag. This one will bold a piece of text that’s
between
the opening tag ( <b> ) and the closing tag ( </b> ). In this case, that
piece
of text is SOMETHING .
But
there are other tags, just to name a few:
 <i>...</i> will
italicize the text between the opening and closing tags
 <u>...</u> will
underline it
 <p>...</p> is
a paragraph of text
 <h1>...</h1> is
the main header on the page
Apart
from those simple tags, there are also more complex tags. For
example,
if you want to build a list like the following:
 Item
1
 Item
2
 Item
3
…
you can do that with the following HTML code:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Or,
if you want to add a link to another page, like this one:
This
is a link to our homepage
…
you can do that with this piece of code:
<a href="https://websitesetup.org/">This is a link to
my homepage</a>

Read this to get the full list of HTML tags . It’ll become useful as you’re
creating
a website with HTML and CSS.
2. Understand HTML Document Structure
Think
of your HTML page as if it was built of Legos. You put different bricks
on
top of one another to end up with a given bigger structure.
But
instead of Lego bricks, you get HTML tags…
Here’s
the simplest HTML document structure:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>My first web page.</p>
</body>
</html>
You
can take the code above, copy and paste it to a new file, save the
document
as index.html , and it’s going to be a perfectly valid HTML page.
Let’s
explain the individual parts of this code:
 <!doctype html> –
the initial declaration of the document
 <html lang="en"> –
another declaration; says that what’s to come next is
an
HTML document written in English
 <head> –
marks the start of the head section; the head section is where all
the
basic parameters of the page go; most of those are not going to be
shown
on the screen; they just define what’s going on under the hood
 <meta charset="utf-8"> –
defines what character set is used to write the
document;
no need to spend too much time on this; just use this
declaration
as is

 <title>Hello, world!</title> – the title of the page; this is what people will
see
in the title bar of their browsers, e.g.:
 <body> –
marks the start of the body section; this is where all the content
of
the page goes; it’s the main part of an HTML document; let us
emphasize this, this section is where you’re going to be including all
the content that’s meant to appear on the page
 <h1>Hello, world!</h1> –
the main header on the page
 <p>My first web page.</p> –
a simple paragraph of text
 </html> –
the closing tag of the whole HTML document
An
important note here. Working on an HTML file in a basic text app or a
complex
text processor like MS Word is not a good experience. To make
things
easy on yourself, install a HTML editor called Sublime Text . It has
versions
for both Mac and PC, and it is free.
Why
is it better? Among other things, it will colorize the syntax of an HTML
file.
Meaning, it’ll visually distinguish your HTML tags from text content, tag
parameters,
and other values. Basically, it’ll all become readable. Here’s
what
our simple HTML structure looks like in Sublime Text:

Okay, back on topic. You can take that new index.html file of yours, copy it
to
where the main directory of your web server is, and then see that page
by
navigating to it through a web browser. Don’t get too excited, though;
this
page will be rather ugly (see below).

Okay, so the page is ugly, how to make it not so?
3. Get to Know CSS Selectors
Just
like HTML has its tags, CSS has selectors .
Selectors
describe how a given element should behave appearance-
wise. Here’s
an example of a CSS selector:
p {
font-size: 18px;
}
This
selector indicates that all HTML <p> tags within the document will
have
a font size of 18px.

However, a more practical way of using CSS selectors is not to restrict all
tags
of a given type to a certain styling, but rather create different “classes”
and
assign them to tags one by one.
For
example, a class selector in CSS looks like this:
.normal-text {
font-size: 18px;
}
Notice
the dot ( . ) before the name of the class ( normal-text ). With the
“normal-text”
class defined, we can now assign that class to those specific
HTML
tags that we want to make 18px in size.
For
example:
<p class="normal-text">This text is going to be
18px.</p>
Let’s
take one more minute to explain all the elements of that piece of CSS
code
above:
 .normal-text –
class definition; everything after the name of the class and
between
the opening and closing brackets {} defines what the elements
assigned
to this class will look like
 font-size –
an example CSS property
 18px –
a value assigned to the property
There’s
a ton of CSS properties apart from the above font-size . Here’s
the complete
list if you’re curious.
4. Put Together a CSS Stylesheet
An
HTML document is very structural – every element has its place, and
the
order of elements is crucial for the final construction and appearance of
the
web page in question. A CSS document is a lot less so.
CSS
documents are often referred to as stylesheets . Basically, a CSS
stylesheet
is a list of all the class definitions that are being used in the

corresponding HTML document. The order of the class definitions is not
that
crucial most of the time (at least for simple designs).
The
way you put a CSS stylesheet together is by defining each class one
by
one, and then testing if the outcome in your page design is what you
wanted.
This
sounds like tedious work, and it is.
But
we’ll make things easier on you, and not force you to learn HTML and
CSS
design by hand. Instead of teaching you everything from scratch, we’ll
take
a living organism and dissect its elements.
This
is where a thing called Bootstrap comes into play.
5. Download/Install Bootstrap
Bootstrap
is an open-source toolkit for creating a website with HTML and
CSS.
In
plain English, Bootstrap takes care of the basic structure of an HTML
document
and CSS stylesheet for you. It delivers a framework that makes
sure
that the main scaffolding of your web page is ready and optimized for
further
development.
Basically,
Bootstrap lets you not start from scratch, and instead go right into
the
fun part. With it, you don’t have to work on the often boring early stages
of
creating a website with HTML and CSS.
There
are two paths you can take:
 Option (a) : learn
Bootstrap – go to the Bootstrap homepage, download the
main
Bootstrap package and start building on top of it.
 Option (b) :
take a shortcut – get a starter pack for Bootstrap with a good-
looking
design and a demo web page already built.
Option (a) might
have some learning curve at the beginning, but it’s not in
any
way the worse way to approach creating a website with HTML and
CSS.
Once you master the core Bootstrap structure, it might be easier for
you
to build new pages and make them look exactly as you want them.
The Bootstrap
documentation is a great place to get started with this path.

We’re going to go with Option (b) for this guide. We’re doing this for a
couple
of reasons, chief of them:
Starting
with a ready-made structure saves a lot of pain in trying to figure
out
the basic necessities of an HTML document. This lets you focus on the
interesting
stuff – like laying out content and making it look good.
In
short, learning things this way will give you a better-looking result
quicker,
which we guess is what you want.
6. Pick a Design
When
you’re creating a website with HTML and CSS, you are free to use
any
Bootstrap template you like. They should all work similarly enough.
However,
for this guide, we’re going to use one of the templates by Start
Bootstrap .
They have a nice selection of free templates that are optimized,
work
trouble-free, and are also very well designed.
The
theme we’re going to use is called Creative . The final effect we’re
going
for will look something like this:
Create Your First HTML/CSS Project
Use the tools on your own computer to start your own HTML/CSS
project!
Requirements:
 Text editor (we recommend VS Code)
 An Internet browser
Int roduct ion
In this article, we’ll cover how to take the CSS skills you’ve learned on
Codecademy and use them to create a basic web page built entirely

from the tools you have on your computer. Before you proceed, you
should already be familiar with the basics of text editors, local files, and
directories, all of which are covered elsewhere on Codecademy.
We recommend that you watch this explainer video and then follow the
instructions below.
If you’d like some optional extra guidance on real-world CSS, watch
the second part of the video.
Step 1: Create a Folder Structure For Your Web Page
Let’s create a folder structure to support your web page. A well-
designed folder structure will help you quickly navigate to the HTML or
CSS files that contain your code.
First, open Finder (in Mac) or Explorer (in Windows). Next, create a
folder (also known as a directory) called DevProject . This folder will
contain all of the files for your HTML and CSS project.
Open the DevProject folder. Inside, create the following items:
1. A new file called index.html (use your preferred text editor)
2. A new folder called resources
The index.html file will contain the HTML code for your web page,
while the resources folder will contain all of the necessary resources
needed by the HTML files (CSS files, images, etc.).
Next, open the newly created resources folder. Inside of this folder,
create the following:
1. An additional folder named css
The css folder will contain the CSS files needed to style your web page.
Finally, open the css folder you just created. Inside of this folder, create
the following:
1. A new file named index.css (use your preferred text editor)

The index.css file will contain all of the CSS styling rules that will be
applied to your web page.
This overall folder structure will help support your workflow as you add
files or resources. At a high-level, here’s what it should look like:
Step 2: Add Content To Your Web Page
Great! With your folder structure, HTML, and CSS files all in the right
place, we can add content to the web page.
First, open the index.html file in your preferred text editor. Next, add
the required boilerplate HTML code:
<! DOCTYPE html >
< html >
< head >
< title ></ title >
</ head >
< body >
</ body >
</ html >
After you add the boilerplate HTML code, feel free to also add the
following items:
1. Your own title between the <title> tags
2. Your own content within the <body> tags. If you need some quick,
pre-written content, feel free to use the following and modify as
you wish:
< h1 >FirstName LastName</ h1 >
< p >I'm learning to code on Codecademy! My goals
include:</ p >
< ul >
< li >Learn to code</ li >
< li >Start a company</ li >

$< li >Help the world</ li > </ ul > < p >This is one of my favorite websites: < a href =" https://www.google.com/ " target =" _blank ">Google</ a ></ p > Finally, open the index.css file in your preferred text editor. Add the following pre-written CSS rules to the file (feel free to modify as you wish): * { font-family : Helvetica, Arial, sans-serif; } h1 { color : SeaGreen; } p, li { font-size : 18px; } a { text-decoration : none; } Be sure to save your changes for both files! Step 3: Link Your HTML File and CSS File As it turns out, the HTML content you added will not be styled by the CSS rules unless index.html and index.css are linked together. In the <head> section, link the stylesheet to the HTML file. < link href =" ./resources/css/index.css " type =" text/css " rel =" stylesheet "> You might be wondering why the href attribute is set to ./resources/css/index.css . This is because you must specify exactly$