The Absolute Beginner's Guide To HTML and CSS PDF
The Absolute Beginner's Guide To HTML and CSS PDF
Beginner’s Guide
to HTML and CSS
A Step-by-Step Guide with
Examples and Lab Exercises
—
Kevin Wilson
apress.io
The Absolute
Beginner’s Guide to
HTML and CSS
A Step-by-Step Guide
with Examples and
Lab Exercises
Kevin Wilson
apress.io
The Absolute Beginner’s Guide to HTML and CSS: A Step-by-Step Guide
with Examples and Lab Exercises
Kevin Wilson
WIDNES, UK
apress.io
Table of Contents
About the Author ���������������������������������������������������������������������������������ix
About the Technical Reviewer �������������������������������������������������������������xi
Introduction ���������������������������������������������������������������������������������������xiii
Chapter 1: Getting Started ��������������������������������������������������������������������1
Linking Pages Together �����������������������������������������������������������������������������������������1
Where Are Web Pages Stored?������������������������������������������������������������������������������3
What Is a URL? ������������������������������������������������������������������������������������������������������3
Index Pages�����������������������������������������������������������������������������������������������������������5
HTML5 �������������������������������������������������������������������������������������������������������������������7
What Is CSS?���������������������������������������������������������������������������������������������������������7
Hosting ������������������������������������������������������������������������������������������������������������������9
Installing Our Web Server ��������������������������������������������������������������������������������9
Starting the Web Server ��������������������������������������������������������������������������������������13
Saving Your Web Pages ���������������������������������������������������������������������������������������15
Local Machine �����������������������������������������������������������������������������������������������15
Using a Web Host�������������������������������������������������������������������������������������������16
Development Tools and Code Editors ������������������������������������������������������������������19
Lab Demo ������������������������������������������������������������������������������������������������������������23
Lab Exercises ������������������������������������������������������������������������������������������������������28
Summary ������������������������������������������������������������������������������������������������������������29
iii
apress.io
Table of Con en s
t
t
Chapter 2: Introduction to HTML���������������������������������������������������������31
Structure of an HTML Page ���������������������������������������������������������������������������������31
HTML Element Structure �������������������������������������������������������������������������������������34
Metadata �������������������������������������������������������������������������������������������������������������37
Lab Exercises ������������������������������������������������������������������������������������������������������38
Summary ������������������������������������������������������������������������������������������������������������39
Chapter 3: Getting Started with HTML ������������������������������������������������41
Setting Up �����������������������������������������������������������������������������������������������������������42
Elements for Formatting Text ������������������������������������������������������������������������������44
Headings��������������������������������������������������������������������������������������������������������46
Paragraphs ����������������������������������������������������������������������������������������������������47
Bold Text ��������������������������������������������������������������������������������������������������������47
Italic Text �������������������������������������������������������������������������������������������������������48
Page Background Color ��������������������������������������������������������������������������������������51
Text Color ������������������������������������������������������������������������������������������������������������53
Fonts �������������������������������������������������������������������������������������������������������������������54
HTML Entities ������������������������������������������������������������������������������������������������������55
Adding Images ����������������������������������������������������������������������������������������������������56
Understanding Image Dimensions ����������������������������������������������������������������������58
Image Alignment �������������������������������������������������������������������������������������������������59
Background Image ����������������������������������������������������������������������������������������������60
Adding Tables ������������������������������������������������������������������������������������������������������63
Adding Links �������������������������������������������������������������������������������������������������������64
Using Images As Links ����������������������������������������������������������������������������������������67
Preserve Formatting �������������������������������������������������������������������������������������������69
iv
apress.io
Table of Con en s
t
t
Adding Lists ��������������������������������������������������������������������������������������������������������69
Unordered List �����������������������������������������������������������������������������������������������69
Ordered List ���������������������������������������������������������������������������������������������������70
Structuring Your Web Page ���������������������������������������������������������������������������������70
Lab Exercises ������������������������������������������������������������������������������������������������������72
Summary ������������������������������������������������������������������������������������������������������������73
Chapter 4: Cascading Style Sheets �����������������������������������������������������75
External CSS Files �����������������������������������������������������������������������������������������������76
CSS Syntax����������������������������������������������������������������������������������������������������������78
Element Type Selector �����������������������������������������������������������������������������������80
Class Selector ������������������������������������������������������������������������������������������������80
ID Selector �����������������������������������������������������������������������������������������������������81
Universal Selector �����������������������������������������������������������������������������������������82
Grouping Selectors ����������������������������������������������������������������������������������������82
Styling Text ����������������������������������������������������������������������������������������������������������83
Specifying Colors ������������������������������������������������������������������������������������������������85
Keyword ��������������������������������������������������������������������������������������������������������85
Hex Value �������������������������������������������������������������������������������������������������������86
RGB Value ������������������������������������������������������������������������������������������������������86
Understanding Measurement Units ��������������������������������������������������������������������87
Padding, Margins, and Borders ���������������������������������������������������������������������������88
Layouts ���������������������������������������������������������������������������������������������������������������90
Flexbox ����������������������������������������������������������������������������������������������������������91
Lab Exercises ����������������������������������������������������������������������������������������������������124
Summary ����������������������������������������������������������������������������������������������������������125
v
apress.io
Table of Con en s
t
t
Chapter 5: Special Effects ����������������������������������������������������������������127
Text Effects �������������������������������������������������������������������������������������������������������127
Rounded Image Corners �����������������������������������������������������������������������������������129
Buttons ��������������������������������������������������������������������������������������������������������������130
Gradients �����������������������������������������������������������������������������������������������������������131
Lab Exercises ����������������������������������������������������������������������������������������������������133
Summary ����������������������������������������������������������������������������������������������������������134
Chapter 6: Multimedia ����������������������������������������������������������������������135
Adding Video �����������������������������������������������������������������������������������������������������135
Adding Audio �����������������������������������������������������������������������������������������������������139
Adding Image Maps ������������������������������������������������������������������������������������������140
Lab Exercises ����������������������������������������������������������������������������������������������������145
Summary ����������������������������������������������������������������������������������������������������������146
Chapter 7: HTML Forms ��������������������������������������������������������������������147
Adding Forms ����������������������������������������������������������������������������������������������������148
Input Types ��������������������������������������������������������������������������������������������������148
Labels ����������������������������������������������������������������������������������������������������������151
Submit Button����������������������������������������������������������������������������������������������152
Building a Form �������������������������������������������������������������������������������������������������152
Styling a Form ���������������������������������������������������������������������������������������������������153
Processing the Form Data���������������������������������������������������������������������������������156
Configure the Web Server to Execute Scripts ����������������������������������������������156
Executing the Script ������������������������������������������������������������������������������������������162
Submission Method ������������������������������������������������������������������������������������������164
Get ���������������������������������������������������������������������������������������������������������������164
Post �������������������������������������������������������������������������������������������������������������165
vi
apress.io
Table of Con en s
t
t
Lab Exercises ����������������������������������������������������������������������������������������������������166
Summary ����������������������������������������������������������������������������������������������������������167
Chapter 8: Introduction to JavaScript ����������������������������������������������169
JavaScript Syntax ���������������������������������������������������������������������������������������������172
Statements ��������������������������������������������������������������������������������������������������172
Blocks ����������������������������������������������������������������������������������������������������������172
Identifiers ����������������������������������������������������������������������������������������������������172
Keywords �����������������������������������������������������������������������������������������������������173
Comments ���������������������������������������������������������������������������������������������������173
First Program ����������������������������������������������������������������������������������������������������174
Lab Exercise ������������������������������������������������������������������������������������������������������175
Summary ����������������������������������������������������������������������������������������������������������179
Chapter 9: Content Management Systems ���������������������������������������181
Set Up WordPress on Our Server ����������������������������������������������������������������������183
Web Development Frameworks ������������������������������������������������������������������������199
Summary ����������������������������������������������������������������������������������������������������������200
Appendix A: HTML Element Reference ����������������������������������������������203
Appendix B: CSS Selector Reference ������������������������������������������������215
Appendix C: CSS Color Codes �����������������������������������������������������������227
Index �������������������������������������������������������������������������������������������������235
vii
apress.io
About the Author
With over 20 years of experience in the computer industry, Kevin Wilson
has made a career out of technology and is showing others how to use it.
After earning a master’s degree in computer science, software engineering,
and multimedia systems, Kevin has held various positions in the IT
industry including graphic and web design, digital film and photography,
programming and software engineering, developing and managing
corporate networks, building computer systems, and IT support. He
currently teaches computer science at college and works as an IT trainer in
England while researching for his Ph.D.
ix
apress.io
About the Technical Reviewer
Jonathon Simpson is a product owner and engineer living in the UK. He
graduated from UCL in 2015. With many years of experience, he has
developed and run many successful projects both independently and in
large companies. He produces a popular software engineering blog called
fjolt.com and posts regular newsletters about the latest developments and
trends in JavaScript and web development.
xi
apress.io
Introduction
The aim of this book is to provide a first course in the use of HTML
and CSS.
It provides a foundation for those who wish to develop their own
websites, and because the book is intended to be a primer, it allows the
beginner to become comfortable with basic HTML and CSS coding.
As it is a first course, no previous experience of computer
programming is assumed.
Throughout the book, we’ll explore HTML and CSS with worked
examples and lab exercises for you to complete yourself. We’ll also
introduce JavaScript and how it can be used to add interactivity to a
website, as well as using content management systems such as WordPress.
For this purpose, we’ve included all the source code for this book in
the following repository: https://github.com/Apress/The-Absolute-
Beginner-s-Guide-to-HTML-and-CSS
xiii
apress.io
CHAPTER 1
Getting Started
Originally developed in the early 1990s by Tim Berners-Lee, HTML stands
for HyperText Markup Language and is a language used to lay out and
format documents for the World Wide Web that are designed to be displayed
in a web browser. In other words, the HTML code describes the structure of
a web page. HTML can be used with other technologies such as Cascading
Style Sheets (CSS) to style and format the document and scripting languages
such as JavaScript to provide functionality and interactive elements.
Basic knowledge of HTML is essential for students and anyone working
in web development. This will help you
apress.io
Chapter 1 Gettin Started
g
Hyperlinks can also link to pages and resources hosted on other
websites.
The links can be embedded into the body of a paragraph as an
underlined word or as an image or icon. This is called hypertext.
As you can see in Figure 1-1, on the left, the hyperlinks appear in
light blue text. When you click the link, the browser will take you to the
linked page.
apress.io
Chapter 1 Gettin Started
g
Where Are Web Pages Stored?
A website and its pages are stored or hosted on a web server. Web servers
are computers usually running Windows Server or, more commonly, some
flavor of the Linux operating system such as CentOS. Running on these
machines is a piece of software called a web server. This is usually Apache,
IIS, or NGINX (pronounced “Engine X”).
What Is a URL?
Each website on the World Wide Web has an address called a URL
(Figure 1-2) or Uniform Resource Locator.
The URL itself can be broken down into its basic elements. Let’s take a
closer look at an example:
https://www.ellumitechacademy.com
apress.io
Chapter 1 Gettin Started
g
www is the name of the server hosting the service or subdomain, in
this case www for the World Wide Web, and usually points to your public_
html or htdocs directory on the web server.
This can also be another service such as an email server:
mail.ellumitechacademy.com
shop.ellumitechacademy.com
www.ellumitechacademy.com/courses
www.ellumitechacademy.com/courses/html
If we want to access a web page or a file for download, we add the path
and file name of the file or document:
www.ellumitechacademy.com/aboutus.html
www.ellumitechacademy.com/downloads/menu.pdf
apress.io
Chapter 1 Gettin Started
g
Of course, these files and directories would need to exist in the public_
html or htdocs directory on the web server (Figure 1-3). Here, we can see
the courses and downloads directories on the server.
Index Pages
Websites are built inside directories on a web server. The index file is the
default page displayed if no other page is specified when a visitor enters
the URL into their web browser. This index file could be index.html, index.
php, or index.py depending on which language you’re using to develop
your site. For now, we’ll use index.html.
In our example, we have a directory structure on our web server
(Figure 1-4).
apress.io
Chapter 1 Gettin Started
g
Figure 1-4. Directory Structure
www.ellumitechacademy.com/courses
the web server will look in the directory for the index.html file:
www.ellumitechacademy.com/courses/index.html
If the index.html file is missing, the web server will attempt to display a
list of files, or you’ll see an error message (Figure 1-5).
apress.io
Chapter 1 Gettin Started
g
HTML5
HTML5 brings device independence, meaning websites can be developed
for all different types of platforms, from PCs to smartphones, without the
need to endlessly install plugins on your browser or develop multiple
versions of a website for mobile devices as we can see in Figure 1-6.
HTML5 also introduces some new tags to handle page structure such
as <section>, <head>, <nav>, <aside>, and <footer> and some tags to
handle media such as <audio> or <video>.
We’ll take a look at some of the new HTML5 features later in this guide.
What Is CSS?
Cascading Style Sheets (CSS) are used to define and customize the styles
and layout for your web pages. This means you can create style sheets to
alter the design, layout, and responsiveness to different screen sizes on
various devices from computers to smartphones.
apress.io
Chapter 1 Gettin Started
g
In CSS, selectors declare which part of the HTML markup a style
applies. The selector could be an H1 heading style, a body tag, or a
paragraph tag.
So what you’ll see is a selector, say H1, and inside the curly braces,
you’ll see a declaration block where you declare your styles for that
selector (Figure 1-7).
You can either add your CSS declarations to the <head> section of
your HTML document between the <style>…</style> tags or add your CSS
declarations to a separate style.css file and add a link in the <head> section
of your HTML document using
This is a better way since it allows you to change the styles in one place
rather than in each HTML page you create.
We’ll take a closer look at CSS later in Chapter 4 of this book.
apress.io
Chapter 1 Gettin Started
g
Hosting
For hosting your website, you have three options:
aprelium.com/downloads
apress.io
Chapter 1 Gettin Started
g
Figure 1-8. Download Web Page
Select the Windows version (or the Mac version if you’re using a Mac)
(Figure 1-9).
10
apress.io
Chapter 1 Gettin Started
g
Figure 1-10. Web Server Installation
Choose a directory where you want to install Abyss Web Server files.
Click “Install” (Figure 1-11).
On your start menu, click “Abyss Web Server X1” (Figure 1-12).
11
apress.io
Chapter 1 Gettin Started
g
Figure 1-12. Start Menu
Create your login details – don’t forget these. Enter a login username
(e.g., admin) and a password (Figure 1-14). Click OK when you’re done.
12
apress.io
Chapter 1 Gettin Started
g
When the browser asks you for a username and password, enter the
username and password you chose earlier (Figure 1-15).
13
apress.io
Chapter 1 Gettin Started
g
Figure 1-16. Start Abyss Web Server
The server will appear in the system area on the bottom right-hand
side (Figure 1-17).
14
apress.io
Chapter 1 Gettin Started
g
Saving Your Web Pages
You can save your web pages to Abyss Web Server on your local machine,
or you can use FTP to upload them to a web host if you have that facility
setup. In this guide, we’ll save our pages to Abyss Web Server on the local
machine.
Local Machine
If you have installed Abyss Web Server on your local machine, any pages
you develop on your website will be saved into the following folder:
You’ll find the folder in File Explorer on the C drive (Figure 1-18).
15
apress.io
Chapter 1 Gettin Started
g
Once the server is running, you’ll be able to access your web page from
a web browser by navigating to
http://localhost/pagename.html
or
http://127.0.0.1/pagename.html
http://localhost/index.html
http://localhost/store.html
filezilla-project.org/download.php
16
apress.io
Chapter 1 Gettin Started
g
Figure 1-19. Site Manager Using FileZilla
Click “New site,” then enter the FTP hostname or IP address, then add
your username and password (Figure 1-20).
17
apress.io
Chapter 1 Gettin Started
g
In the pane on the left-hand side, navigate to the folder where you save
all your HTML files into. In the pane on the right-hand side, navigate to the
htdocs or public_html folder on the web server (Figure 1-21).
18
apress.io
Chapter 1 Gettin Started
g
Figure 1-22. Upload and Download Files
wiki.filezilla-project.org/Documentation
19
apress.io
Chapter 1 Gettin Started
g
Figure 1-23. Adobe Dreamweaver IDE
Another popular IDE is Visual Studio Code or VS Code for short. You
can download VS Code from the following website:
code.visualstudio.com
In Figure 1-24, we can see VS Code on the left-hand side showing our
HTML code with a browser preview open on the right showing the output
of the HTML code.
20
apress.io
Chapter 1 Gettin Started
g
Figure 1-24. VS Code IDE
Another code editor to try is Brackets. Brackets is a free editor that you
can download from the developer’s website:
www.brackets.io
In Figure 1-25, you can see the Brackets window open on the left-hand
side, and it makes quite a nice little editor for coding. On the right-hand
side, you can open up your live preview to see what your page looks like as
you’re writing your code.
21
apress.io
Chapter 1 Gettin Started
g
Figure 1-25. Brackets App with Browser Preview
You can use any of these tools to write your code. Some of these IDEs
can be quite complex, so while you are learning, I suggest you stick with
Notepad and write the code manually so you can understand the structure
and meaning without distractions.
Throughout this book, we’ll be using Notepad/TextEdit to write our
code as shown in Figure 1-26; however, you can use any code editor you
like such as VS Code if you prefer.
22
apress.io
Chapter 1 Gettin Started
g
Figure 1-26. Notepad Code Editor and Browser Preview
Lab Demo
In this demo, we’re going to explore how web servers work.
In Figure 1-27, the machine on the right has our web server installed.
A web server is a program that runs on the machine and serves web
pages (such as Abyss that we installed earlier). The web server software is
bound to a port. A port is a number used to identify a service running on a
machine. In this case, the service is a web server and is bound to port 80.
This machine is connected to a small network using cat5 cables through a
network switch.
23
apress.io
Chapter 1 Gettin Started
g
Figure 1-27. Machine with Web Server Installed
The web server running on the machine on the right is pointing at the
public_html or htdocs directory stored on the machine’s hard drive. Here,
we can see we have an index.html file in the public_html directory on our
server (Figure 1-28). This is called the document root.
• IP address: 192.168.0.100
• Port: 80
24
apress.io
Chapter 1 Gettin Started
g
Let’s add another computer. The computer on the left is called a
client and is a laptop running Windows with a web browser installed
(Figure 1-29). The browser could be Edge, Firefox, or Chrome.
This laptop connects to the web server using the IP address allocated
to the machine running the web server. On the laptop, we can type this
IP address into the address bar at the top of the browser: 192.168.0.100
(Figure 1-30).
The laptop will connect to the web server using the server’s IP address
through port 80 (Figure 1-31).
25
apress.io
Chapter 1 Gettin Started
g
Figure 1-31. Web Server Connected
The IP address and the port number form a socket. There will be a
socket on the server and one on the laptop (client). Each socket is unique
and bidirectional, so applications can send and receive data (Figure 1-33).
26
apress.io
Chapter 1 Gettin Started
g
Figure 1-33. Socket
27
apress.io
Chapter 1 Gettin Started
g
Figure 1-34. Computer Connecting to the Web Server
Your computer (i.e., the laptop) then uses this IP address to connect to
the web server as before.
Lab Exercises
1. Set up your personal web server on your computer
or get access to a web host to host your HTML files.
3. What is hypertext?
4. What is a URL?
5. What is HTML?
28
apress.io
Chapter 1 Gettin Started
g
6. What is CSS?
9. What is an IP address?
Summary
• Web pages are all linked together using clickable text or
images, called hyperlinks.
• VS Code
• Dreamweaver
• Brackets
29
apress.io
CHAPTER 2
Introduction to HTML
In this chapter, we’ll take a look at the basics of an HTML document.
The basic structure of an HTML document has three parts:
• Document header
• Body
apress.io
Chapter 2 Introdu t on to ML
c
i
HT
At the top on the first line, we have the document type declaration.
Underneath, we have the first <html> element. This defines the start of
the HTML page.
Inside the <html> elements, we have the <head> element. This
contains information about the page as well as the document title.
Underneath, we have the <body> element. This is where the main body
of the document is defined. This is the bit you see in your browser window.
Finally, we need to close the <html> element. This marks the end of the
document.
Let’s explore an example in a bit more detail. Here, you can see a
simplified web page broken down to its most basic elements (Figure 2-2).
32
apress.io
Chapter 2 Introdu t on to ML
c
i
HT
The <html> element contains all the HTML code and defines the start
of the HTML page. You can also specify the language by adding the lang
attribute:
The <body> element contains all the elements and is where the main
content is written to display on the web page.
You might also find the following elements:
<!-- … -->
33
apress.io
Chapter 2 Introdu t on to ML
c
i
HT
These elements specify a comment for the developer’s benefit and are
ignored by the browser. Comments are useful to document your code and
explain its function.
The bit visible to the user goes in between the two tags.
34
apress.io
Chapter 2 Introdu t on to ML
c
i
HT
The opening HTML tag often contains some attributes that define the
HTML element’s properties and are used to control formatting, size, page
link references, and so on, and it is placed inside the element's opening
tag. For example, see Figure 2-4.
35
apress.io
Chapter 2 Introdu t on to ML
c
i
HT
Figure 2-5. An HTML Element
The element starts with an opening angle bracket <, followed by the
element ID of the element we want to use, in this case, the “a” for anchor.
After that, we add any attributes as we can see in Figure 2-5.
Attributes contain additional pieces of information. Attributes take the
form of an opening tag, and additional info is placed inside. For example,
in the HTML tag earlier, “href” is an attribute, and “about.html” is the value
of the attribute.
We close the opening tag with an angle bracket >.
After the opening tag, we add the visible bit that the user will see on the
web page “About Us.”
The closing tag contains a forward slash before the element ID, in
this case:
</a>
In Figure 2-6, we can see the anchor element in the HTML document
on the left. The text “About Us” appears on the web page in the browser
window and is linked to the page about.html.
36
apress.io
Chapter 2 Introdu t on to ML
c
i
HT
Figure 2-6. Anchor Element
Similarly with an image element, we start with the opening <img> tag,
then add the src attribute containing the image we want to display:
<img src="profilepic.jpg">
The image source (src) is an attribute of the opening <img> tag. Notice
that the <img> element doesn’t have a closing tag. This is known as an
empty, self-closing, or void element.
Metadata
Metadata is additional information about an HTML document. The meta
elements can be used to describe properties of the HTML document, such
as author, date, and content descriptions. Metadata is used by browsers to
determine how to display content and by search engines such as Bing or
Google to work out what a web page is about.
37
apress.io
Chapter 2 Introdu t on to ML
c
i
HT
<meta> always go inside the <head> of the HTML page as you can see
in the following:
<head>
<meta charset="UTF-8">
<meta name="description" content="Enjoy succulent meats…">
<meta name="author" content="Anna Wilson">
</head>
The meta element has various attributes such as charset and name.
A meta charset specifies the character encoding for the HTML
document which is usually UTF-8.
A meta name specifies names for the metadata such as a content
description that appears in search engine results of the page, keywords
that identify the content, and author of the page.
Lab Exercises
1. Open a new text file and save it as ch02.html.
6. What is metadata?
38
apress.io
Chapter 2 Introdu t on to ML
c
i
HT
Summary
• An HTML element consists of a start tag, the element’s
attributes, the visible bit or the content, and an end tag.
The HTML tag is used to mark the start or end of an
element.
39
apress.io
CHAPTER 3
Getting Started
with HTML
In this chapter, we are going to build a very simple home page for our
restaurant website using common text formatting elements, and we’ll add
some images, links, tables, and lists.
This will provide you with a foundation and basic structure of a web
page using HTML, which you can build on later.
We’ll walk through the process from a blank HTML document, then
build the home page using the HTML elements.
We’ll also look at how to use the style attributes of each HTML
element. You can apply styles directly in the HTML code each time
you want to use the style such as fonts, text color, and page color. This,
however, is a bit cumbersome and becomes very difficult to maintain in
the long run, especially in larger projects where there is a lot of code. A
much better way is to use a style sheet or CSS to set fonts, text color, and
page color. This allows you to define all your styles once and in one place,
usually in a styles.css file. You can then call the CSS file from within your
HTML code, which we’ll look at in the next chapter.
For now, let’s concentrate on HTML code.
apress.io
Chapter 3 Gettin Started with ML
g
HT
Setting Up
For the exercises in this chapter, we will be using Notepad and a web
browser. We’ll be saving our HTML files into the htdocs folder on our
personal web server we installed in Chapter 1.
Open your text editor. I’m going to use Notepad. This is where we’re
going to type in our code. We’re going to start with the outline of an HTML
document. For example, see Figure 3-1.
To save the file, go to the “File” menu, then click “Save as” (Figure 3-2).
42
apress.io
Chapter 3 Gettin Started with ML
g
HT
Figure 3-2. Save As in Notepad
From the “Save As” dialog box, navigate to your “Abyss Web Server”
folder on the C drive, then select “htdocs” (Figure 3-3).
43
apress.io
Chapter 3 Gettin Started with ML
g
HT
In the “File name” field, enter the name of your web page:
index.html
Make sure the file extension is .html and the “Save as type” is set to
“All files” (Figure 3-4).
With the Abyss Personal Web Server running, open your web browser.
Enter the following into the address bar at the top:
http://127.0.0.1/index.html
index.html is the file we want to view. To view any other HTML files
you create, just substitute this file name.
Arrange your windows side by side; put Notepad on the left and your
web browser next to it on the right as they are on the opposite page. You
may need to resize your windows.
Every time you make any changes to your file in Notepad, you’ll need
to save the file, then click the refresh icon in your web browser.
Let’s get started.
44
apress.io
Chapter 3 Gettin Started with ML
g
HT
Figure 3-5. Title and Body Text
HTML elements label the pieces of your web page, such as headings,
text formatting with bold or italic, paragraphs, images, links, and tables.
Let’s have a look at some simple formatting elements.
Main Heading Style
<h1>...</h1>
Subheading Style
<h2>...</h2>
Bold Text
<b>...</b>
Italic Text
<i>...</i>
Paragraph Text
<p>...</p>
45
apress.io
Chapter 3 Gettin Started with ML
g
HT
HTML elements begin and end with an HTML tag and usually come in
pairs, and you’ll need to surround the piece of text or word using the start
and end tags.
For example:
Headings
Let’s add some of these elements to our web page. Start with the heading,
using the <h1> tag.
46
apress.io
Chapter 3 Gettin Started with ML
g
HT
Browsers do not display the HTML elements but use them to format
the content of the page according to their function.
Paragraphs
You can also add paragraphs. It is best practice to add all your paragraphs
between <p>...</p> tags:
Bold Text
You can also make text bold or strong. Just surround the word or words
with the tags:
47
apress.io
Chapter 3 Gettin Started with ML
g
HT
Figure 3-7. Bold Text
Italic Text
You can also make text italic or emphasized. The <i> tag marks text in an
alternate voice, and the content inside is usually displayed in italic type.
The <em> tag marks text as emphasized, and the content inside is usually
displayed in italic type.
To use these tags, just surround the word or words with the <i> or
<em> tags:
<i> Served up by our friendly team, every day of the week, our
mouthwatering Sunday roast and weekday carvery are sure to be a
hit with all the family. </i>
48
apress.io
Chapter 3 Gettin Started with ML
g
HT
<em> Served up by our friendly team, every day of the week, our
mouthwatering Sunday roast and weekday carvery are sure to be a
hit with all the family. </em>
Have a look at the example (Figure 3-8). The text “Served up by our
friendly team, every day of the week, our mouthwatering Sunday roast and
weekday carvery are sure to be a hit with all the family” appears in italic or
emphasized text.
Now let’s put it all together using the information we just learned. In
the body of your HTML document, try adding the example in Figure 3-9.
49
apress.io
Chapter 3 Gettin Started with ML
g
HT
Figure 3-9. Use of Tags
When you open the page in your web browser, you’ll see something
like Figure 3-10.
50
apress.io
Chapter 3 Gettin Started with ML
g
HT
Figure 3-10. Tags in Use
The heading has been rendered using <H1>, and the tag line has been
rendered in bold text using <b>.
Also, we have created a paragraph using the <p> tags. This tag splits the
text into neatly spaced paragraphs.
51
apress.io
Chapter 3 Gettin Started with ML
g
HT
Have a look at the code in Figure 3-11.
You can also change the background color of other objects, such as the
paragraph background (Figure 3-12):
52
apress.io
Chapter 3 Gettin Started with ML
g
HT
Figure 3-12. Background Color of Objects
Text Color
To change the text color, add the style attribute to a style (Figure 3-13).
Set the attribute to “color” and then select a color from the list of
HTML colors:
53
apress.io
Chapter 3 Gettin Started with ML
g
HT
Figure 3-13. Text Color Change
Fonts
To change the font, add the style attribute to a style. Set the attribute font-
family to the font name you want (Figure 3-14). In this example, I’m using
Helvetica:
54
apress.io
Chapter 3 Gettin Started with ML
g
HT
Figure 3-14. Changing the Font
HTML Entities
An HTML entity is a bit of text that begins with an ampersand and ends
with a semicolon and is frequently used to display reserved characters
which would otherwise be interpreted as HTML code, invisible characters
such as nonbreaking spaces, and symbols. A commonly used entity in
HTML is the nonbreaking space:
55
apress.io
Chapter 3 Gettin Started with ML
g
HT
If you want to add the copyright sign, use
©
$
£
Adding Images
To add an image, use the <img> element:
Use the src attribute to specify the file name and location of the image.
It is advised to keep images in a separate folder called “img,” “images,”
or sometimes “assets.” This helps to keep all your files organized. In this
guide, we’ll save our images into the “img” folder on our web server.
56
apress.io
Chapter 3 Gettin Started with ML
g
HT
To reference the image in the src attribute of the img element, add
the folder name followed by a forward slash, then the image name
(Figure 3-16).
Notice that the size of this image is large. You can also specify the size
of the image using the width and height attributes measured in pixels (px).
57
apress.io
Chapter 3 Gettin Started with ML
g
HT
By default, the image will be displayed according to the saved width
and height of the actual image (Figure 3-17), but you can override this.
If you look at the image in Figure 3-18, it is a bit small and could do
with expanding to the length of the page.
The width of 500px would be a better fit, so add the width attribute and
set it to “500” (Figure 3-19):
This will widen the image and automatically adjust the length to
prevent the image from being stretched.
You can also specify both width and height.
58
apress.io