0% нашли этот документ полезным (0 голосов)
317 просмотров67 страниц

The Absolute Beginner's Guide To HTML and CSS PDF

The Absolute Beginner's Guide to HTML and CSS PDF, Read online The Absolute Beginner's Guide to HTML and CSS PDF, Download The Absolute Beginner's Guide to HTML and CSS PDF

Загружено:

dinhkhoacq
Авторское право
© © All Rights Reserved
Мы серьезно относимся к защите прав на контент. Если вы подозреваете, что это ваш контент, заявите об этом здесь.
Доступные форматы
Скачать в формате PDF, TXT или читать онлайн в Scribd
0% нашли этот документ полезным (0 голосов)
317 просмотров67 страниц

The Absolute Beginner's Guide To HTML and CSS PDF

The Absolute Beginner's Guide to HTML and CSS PDF, Read online The Absolute Beginner's Guide to HTML and CSS PDF, Download The Absolute Beginner's Guide to HTML and CSS PDF

Загружено:

dinhkhoacq
Авторское право
© © All Rights Reserved
Мы серьезно относимся к защите прав на контент. Если вы подозреваете, что это ваш контент, заявите об этом здесь.
Доступные форматы
Скачать в формате PDF, TXT или читать онлайн в Scribd
Вы находитесь на странице: 1/ 67

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

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

ISBN-13 (pbk): 978-1-4842-9249-5 ISBN-13 (electronic): 978-1-4842-9250-1



https://doi.org/10.1007/978-1-4842-9250-1

Copyright © 2023 by Kevin Wilson


This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or
part of the material is concerned, specifically the rights of translation, reprinting, reuse of
illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way,
and transmission or information storage and retrieval, electronic adaptation, computer software,
or by similar or dissimilar methodology now known or hereafter developed.
Trademarked names, logos, and images may appear in this book. Rather than use a trademark
symbol with every occurrence of a trademarked name, logo, or image we use the names, logos,
and images only in an editorial fashion and to the benefit of the trademark owner, with no
intention of infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if
they are not identified as such, is not to be taken as an expression of opinion as to whether or not
they are subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of
publication, neither the authors nor the editors nor the publisher can accept any legal
responsibility for any errors or omissions that may be made. The publisher makes no warranty,
express or implied, with respect to the material contained herein.
Managing Director, Apress Media LLC: Welmoed Spahr
Acquisitions Editor: James Robinson-Prior
Development Editor: James Markham
Coordinating Editor: Gryffin Winkler
Cover designed by eStudioCalamar
Cover image designed by vectorjuice on Freepik
Distributed to the book trade worldwide by Springer Science+Business Media New York, 1
New York Plaza, Suite 4600, New York, NY 10004-1562, USA. Phone 1-800-SPRINGER, fax (201)
348-4505, e-mail [email protected], or visit www.springeronline.com. Apress Media,
LLC is a California LLC and the sole member (owner) is Springer Science + Business Media
Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation.
For information on translations, please e-mail [email protected]; for
reprint, paperback, or audio rights, please e-mail [email protected].
Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook
versions and licenses are also available for most titles. For more information, reference our Print
and eBook Bulk Sales web page at http://www.apress.com/bulk-sales.
Any source code or other supplementary material referenced by the author in this book is
available to readers on GitHub via https://github.com/Apress.
Printed on acid-free paper

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

• Understand the World Wide Web.

• Create and customize your own websites: You can


create a website or customize an existing web template
if you know HTML.

• Become a web developer: If you want to start a career


as a professional web developer, HTML and CSS are
essential skills.

Linking Pages Together



Web pages are all linked together using clickable text or images, called
hyperlinks. This is known as hypertext and enables you to create multiple
pages on a website that allow the user to browse through the pages by
clicking these hyperlinks.
© Kevin Wilson 2023 1
K. Wilson, The Absolute Beginner’s Guide to HTML and CSS,
https://doi.org/10.1007/978-1-4842-9250-1_1

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.

Figure 1-1. Hypertext Document

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.

Figure 1-2. Anatomy of a URL

The URL itself can be broken down into its basic elements. Let’s take a
closer look at an example:

https://www.ellumitechacademy.com

The "www.ellumitechacademy.com" part is called the hostname.

Let’s break the URL down into its different parts.


https:// stands for hypertext transfer protocol secured and is the
protocol the web browser is using to connect to the server. This is known
as the scheme.
You might find other schemes such as ftp:// if you are connecting to an
FTP site.

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

or perhaps a subdomain for the website’s online store:

shop.ellumitechacademy.com

ellumitechacademy is the domain name or organization’s name and


is unique to that organization. This is known as a second-level domain.
.com is the type of site. It can be .co.x for country-specific companies
(e.g., .co.uk), .org for nonprofit organizations, or .gov for government
organizations. These are known as top-level domain names and are
designed to identify the types of companies represented on the Web.
After the domain name, you might find a forward slash, then another
name. This is known as a subdirectory or path. For example, to access the
courses directory on the web server, we’d use

www.ellumitechacademy.com/courses

or for an html directory inside courses, we’d use

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

or a file in the downloads directory:

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.

Figure 1-3. Directory Structure on a Web 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

Inside the directory, you’d have an index file that is displayed by


default when the user navigates to the directory in their browser. If the user
types in

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).

Figure 1-5. Web Server Directory Listing

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.

Figure 1-6. Website on Different Devices

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).

Figure 1-7. Anatomy of a CSS Selector

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

<link rel="stylesheet" type="text/css" href="styles.css">

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:

• A dedicated hosting service, where a server located


at your school or is provided for your use. This can be
used for development and in some cases a live website
depending on the service.

• Setting up a personalized web server on your


own computer: This is only good for testing and
development and is not intended to host a live website.

• Managed hosting service or web host, which is a service


managed by a web hosting provider: This is what
you would use to host a live website that is available
publicly.

Installing Our Web Server



In this guide, we are going to use a personal web server. This will help you
set up a development environment you can use on your computer to test
your website without having it accessible on the Internet.
Abyss turns your computer in a full-featured web server. To download
Abyss Web Server, open a web browser and navigate to

aprelium.com/downloads

On the left-hand side, click “Free Download” (Figure 1-8).

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).

Figure 1-9. Download Abyss Web Server Page

Open your downloads directory, then double-click the software


package you just downloaded. Click “Agree” on the license
agreement page.
Deselect components you do not want to install. Select all
components, except “Abyss Web Server (32-bit).” “Start Menu Shortcuts”
enables adding Abyss Web Server shortcuts in the Start Menu, and
“Documentation” installs help files (Figure 1-10).

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).

Figure 1-11. Choose a Directory to Install the Web Server

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

The configuration wizard will appear in your web browser


(Figure 1-13). Select your language.

Figure 1-13. Configuration Wizard

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.

Figure 1-14. Login Details

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).

Figure 1-15. Enter Your Credentials

Starting the Web Server



We’ve configured the server so it doesn’t automatically start when you log
in to Windows, as this could be a security risk. It is best to only run the web
server when you need it to test your website.
Once the web server has been installed, you’ll need to start the web
server before you can do anything.
To start the server, open the start menu, then click “Abyss Web Server
X1” (Figure 1-16).

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).

Figure 1-17. Abyss Web Server in the System Area

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:

c:\abyss web server\htdocs

You’ll find the folder in File Explorer on the C drive (Figure 1-18).

Figure 1-18. Abyss Web Server Pages

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

pagename.html is the name of the HTML document you want to view.


This could be

http://localhost/index.html
http://localhost/store.html

Using a Web Host



If you are using a web host somewhere else, you’ll need to use an FTP
client to connect to the server to upload your files. You’ll need to obtain
your username and password and the address of the web server from your
hosting provider.
A good FTP client to use if you’re using Windows or Mac is FileZilla.
You can download this at the following website:

filezilla-project.org/download.php

Once downloaded and installed on your machine, start the program.


From the “File” menu, select “Site Manager” (Figure 1-19).

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).

Figure 1-20. FTP and Login Process

Click connect to begin.


Once a connection to the server is established, you’ll land on the
home screen.

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).

Figure 1-21. Files on the Local Computer and Web Server

To upload files, select them in the left-hand pane, then right-click


the selection. Select “Upload” from the pop-up menu (Figure 1-22). To
download files, select them in the right-hand pane, then right-click the
selection. Select “Download” from the pop-up menu.

18

apress.io
Chapter 1 Gettin Started

g
Figure 1-22. Upload and Download Files

For more detailed information on how to use FileZilla, go here:

wiki.filezilla-project.org/Documentation

Development Tools and Code Editors



Finding the right tool is a matter of personal preference and depends on
the type of application you are going to develop. There are many different
tools available. You could use an IDE which is an integrated development
environment such as Adobe Dreamweaver, Brackets, or VS Code.
An IDE is a software application that consists of a source code editor
with syntax highlighting to make code easier to read, as well as built-in
tools to help you develop your code and a debugger to help you find errors.
These are all integrated into one application, hence the name integrated
development environment.
In Figure 1-23, we see Dreamweaver. You can see that it has a live
preview along the top with the code underneath, with various other tools
and options to help you write your code.

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.

Figure 1-28. Document Root


Each computer on the network has an IP address, which is an address
that uniquely identifies a device on a network. The web server has an
IP address of 192.168.0.100 and is bound to port 80 (the default for
unencrypted web traffic). You can see the configuration summary as follows:

• IP address: 192.168.0.100
• Port: 80

• Document root: /var/www/public_html

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.

Figure 1-29. Client Accessing a Web Server

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).

Figure 1-30. IP Address

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

On the laptop, the connection is assigned a port number between


49,152 and 65,535 so that returning traffic from the web server can be
identified as belonging to the same connection (Figure 1-32).

Figure 1-32. Connection Assigned Port Number

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

Once a connection is established, the web server reads the index


HTML file in the public_html directory and sends the code in this file to
the laptop (client).
The browser on the laptop (client) then reads the HTML code and
creates the web page you see on your screen.
You may have noticed that when visiting a website, you don’t type in a
string of numbers, you type in a domain name. The problem is computers
don’t understand domain names, only IP addresses, so we need to
convert them.
In order to do this, we need to add another server to the mix called a
DNS server. This server converts our memorable domain names into IP
addresses.
When you enter the domain name into your browser, for example,
elluminetpress.com, your computer (the laptop) will send the domain
name to a DNS server. The DNS server responds with the IP address (e.g.,
192.168.0.100) (Figure 1-34).

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.

2. Choose a text editor to edit your code, for example,


Notepad.

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?

7. What is a web server?

8. What is the purpose of an index.html file?

9. What is an IP address?

10. What is the purpose of a DNS server?

Summary

• Web pages are all linked together using clickable text or
images, called hyperlinks.

• Code editors and IDEs

• VS Code

• Dreamweaver

• Brackets

• Text editor (Notepad, TextEdit, etc.)

• A website and its pages are stored or hosted on a


web server.
• A DNS server translates domain names into IP
addresses.

• An IP address is a unique address that identifies a


device on the Internet.

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 type declaration at the top

• Document header

• Body

Structure of an HTML Page



We can see in Figure 2-1 that an HTML page is a text file containing the
elements and information the web browser uses to display the web page.
Static web pages have the file extension .htm or more commonly .html.

Figure 2-1. Structure of an HTML Document


© Kevin Wilson 2023 31
K. Wilson, The Absolute Beginner’s Guide to HTML and CSS,
https://doi.org/10.1007/978-1-4842-9250-1_2

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).

Figure 2-2. Blank HTML Document

<!DOCTYPE html> specifies what type of document the web browser


can expect, in this case, HTML5.

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:

<html lang=“en”> to specify English


<html lang=“es”> to specify Spanish

<html lang=“fr”> to specify French

<html lang=“de”> to specify German

In the <head> of the document, you’ll find

<title>: This is where we insert the page name as it


will appear at the top of the browser window or tab.

<style>: This is where you define embedded style


information for an HTML document using CSS. See
Chapter 4.

<link>: Link to an external style sheet. See


Chapter 4.

<script>: This is used to define client-side scripts,


such as JavaScript. See Chapter 8.

<meta>: This is where information about the


document is stored – character encoding, name,
description, etc. See the “Metadata” section later in
this chapter.

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.

HTML Element Structure



Technically, 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.
Let’s take a closer look at how HTML elements are constructed.
Elements start with an opening tag and end with a closing tag. The tags
themselves start and end with angle brackets < >.
In the example in Figure 2-3, let’s have a look at the anchor element.
This element creates a hyperlink to another web page. The HTML element
starts with an opening tag and ends with a closing tag.

Opening Tag Closing Tag

Figure 2-3. HTML Opening and Closing Tags

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.

Figure 2-4. HTML Tag Structure

HTML attributes are made up of two parts: a name and a value.

• The name is the attribute you want to set. For example,


the anchor <a> element contains an attribute named
“href,” which indicates the address of the page you want
to link to.

• The value is what you want the attribute to be set to


and is always contained within quotation marks. In
this example, the page we want to link to is called
“about.html”.

Let’s take a look at an example. Here, we want to add the link


“about us” to a website. The anchor element is represented by “a” and is
written as

<a href = "about.html"> About Us </a>

Let’s break the element down and see how it works.

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.

2. Write the basic structure of an HTML document.

3. What is an HTML tag?

4. What is an HTML element?

5. What’s the difference between an HTML tag and an


HTML element?

6. What is metadata?

7. What is the <head> section for in an HTML


document? What other elements can you include?

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.

• <!DOCTYPE html> specifies what type of document the


web browser can expect, in this case, HTML5.

• Head elements contain information about the page as


well as the document title. These also contain other
elements such as title to specify a page title for the
browser window, style to include CSS styles, script to
include any JavaScripts, and meta to include metadata.

• The body elements contain the main body of


the document. This is the bit you see in your
browser window.

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.

© Kevin Wilson 2023 41


K. Wilson, The Absolute Beginner’s Guide to HTML and CSS,
https://doi.org/10.1007/978-1-4842-9250-1_3

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.

Figure 3-1. HTML Document Outline

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).

Figure 3-3. Save in Abyss Web Server

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).

Figure 3-4. Save in Abyss Web Server

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.

Elements for Formatting Text



As you can see in the illustration in Figure 3-5, the text in the <title> tags
appears on the title tab in the web browser, and anything between the
<body> tags appears in the browser window.

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:

<h1> This is the main page heading </h1>

Headings

Let’s add some of these elements to our web page. Start with the heading,
using the <h1> tag.

Figure 3-6. HTML Text Editor

In the illustration in Figure 3-6, the HTML document is open in a


text editor on the left. The same document is open in a web browser on
the right, and you can see the effect that each element has on the text, as
indicated by the red arrows.

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:

<p> Every day, our expert chefs prepare a mouth-watering


feast of hand-carved meats including beef, turkey, pork and
marmalade-glazed gammon. All accompanied by ruffled roasties, a
wide range of veg, and giant yorkshire puddings. 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.</p>

Bold Text

You can also make text bold or strong. Just surround the word or words
with the tags:

<b> beef, turkey, pork and marmalade-glazed gammon</b>


<strong> beef, turkey, pork and marmalade-glazed gammon
</strong>

Have a look at the example (Figure 3-7).

47

apress.io
Chapter 3 Gettin Started with ML

g
HT
Figure 3-7. Bold Text

The text “beef, turkey, pork and marmalade-glazed gammon.”


appears in bold or strong 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.

Figure 3-8. Italics

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.

Page Background Color



To change the background color on any object, add the style attribute. Set
it to “background-color” and then choose a color from the HTML color list:

<body style = "background-color:Orange;">

51

apress.io
Chapter 3 Gettin Started with ML

g
HT
Have a look at the code in Figure 3-11.

Figure 3-11. Background Color

You can also change the background color of other objects, such as the
paragraph background (Figure 3-12):

<p style = "background-color:Gold">

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:

<H1 style = "color:Yellow;">

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:

<h2 style = "font-family:Helvetica;">The Home of the


Roast!</h2>

Let’s add this line to our HTML file.

54

apress.io
Chapter 3 Gettin Started with ML

g
HT
Figure 3-14. Changing the Font

The font on the subheading has changed to Helvetica.


You can choose from a variety of fonts. Not all of them are supported
by all browsers but most of them are.
You can also make use of Google Fonts.

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:

&nbsp;

55

apress.io
Chapter 3 Gettin Started with ML

g
HT
If you want to add the copyright sign, use

&copy;

or perhaps the dollar ($) or pound (£) sign:

&dollar;
&pound;

Figure 3-15 shows a list of commonly used characters.

Figure 3-15. Commonly Used Characters

Adding Images

To add an image, use the <img> element:

<img src = "img/carvery.jpg" width=" " height=" ">

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).

Figure 3-16. Adding an Image

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).

Figure 3-17. Image Size

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.

Understanding Image Dimensions



Image dimensions (i.e., the width and height) are specified in pixels (px).
The image in Figure 3-18 is 500px by 220px. This means there are 500
pixels across the width and 220 pixels along the height.

Figure 3-18. Image Resizing

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):

<img src="img/carvery.jpg" width="500">

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

Вам также может понравиться