Scribd
Upload
95 views

HTML and Css For Newbies STANDARD

In the ever-evolving landscape of technology, the ability to understand and utilize programming languages has become increasingly valuable. Among these languages, HTML and CSS serve as the fundamental building blocks of the web. Whether you're a budding developer, a curious beginner, or simply someone looking to expand their digital skill set, this book is designed to provide you with a solid foundation in HTML and CSS.

Uploaded by

Tatenda Majira
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
95 views

HTML and Css For Newbies STANDARD

In the ever-evolving landscape of technology, the ability to understand and utilize programming languages has become increasingly valuable. Among these languages, HTML and CSS serve as the fundamental building blocks of the web. Whether you're a budding developer, a curious beginner, or simply someone looking to expand their digital skill set, this book is designed to provide you with a solid foundation in HTML and CSS.

Uploaded by

Tatenda Majira
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 98

TATENDA J MAJIRA

HTML and CSS for newbies


Introduction to web development
First published by Imprint: Lulu.com 2022

Copyright © 2022 by Tatenda J Majira

All rights reserved. No part of this publication may be reproduced,


stored or transmitted in any form or by any means, electronic,
mechanical, photocopying, recording, scanning, or otherwise
without written permission from the publisher. It is illegal to copy
this book, post it to a website, or distribute it by any other means
without permission.

Tatenda J Majira asserts the moral right to be identified as the


author of this work.

Tatenda J Majira has no responsibility for the persistence or


accuracy of URLs for external or third-party Internet Websites
referred to in this publication and does not guarantee that any
content on such Websites is, or will remain, accurate or appropriate.

Designations used by companies to distinguish their products are


often claimed as trademarks. All brand names and product names
used in this book and on its cover are trade names, service marks,
trademarks and registered trademarks of their respective owners.
The publishers and the book are not associated with any product or
vendor mentioned in this book. None of the companies referenced
within the book have endorsed the book.

First edition

Cover art by MUB

This book was professionally typeset on Reedsy.


Find out more at reedsy.com
I want to express my gratitude to my sister for her encouragement
and support throughout the writing process of this book. Her
motivation played a crucial role in helping me complete it.
Additionally, I dedicate this book to her as a token of appreciation
for her encouragement and as an inspiration for her to learn HTML
and CSS.
Contents

Acknowledgments iv
Foreword v
Introduction vii
1 Chapter 1 1
Getting Started 1
Text editor 1
Steps on how to create a new html page file 2
2 Chapter 2 8
Introduction 8
What is HTML and CSS ? 8
HTML 9
CSS 9
Differences between HTML and CSS 11
3 Chapter 3 13
There many HTML tags but we going to
show you the basic and most important
ones so that you might be able to make
your own basic web page after reading this book. 17
4 Chapter 4 20
<meta> 20
5 Chapter 5 22
<head> </head> 22
6 Chapter 6 23
<body> </body> 23
7 Chapter 7 25
<h1></1> to <h6></h6> 25
8 Chapter 8 27
<p></p> 27
9 Chapter 9 29
<img> 29
10 Chapter 10 32
<li> </li> 32
Unordered List <ul></ul> 33
Ordered List <ol></ol> 33
11 Chapter 11 35
<table></table> 35
12 Chapter 12 37
<input> 37
13 Chapter 13 43
<form> </form> 43
14 Chapter 14 46
<a href = “” ></a> 46
15 Chapter 15 51
<style></style> 51
16 Chapter 16 53
Id and class 53
17 Chapter 17 55
18 Chapter 18 61
19 Chapter 19 63
Color 63
20 Chapter 20 65
Font Size 65
21 Chapter 21 67
Background Color 67
22 Chapter 22 69
Height/Width 69
23 Chapter 23 71
Border 71
24 Chapter 24 74
Background Image 74
25 Chapter 25 76
Border-Radius 76
About the Author 81
Also by Tatenda J Majira 83
Acknowledgments

I would like thank everyone who worked on HTML and CSS


for creating something that is worth writing a book for and
also everyone who read the book before it was published and
gave feedback .Not forgetting the MUB organization and team
that helped on publishing the book.

iv
Foreword

Welcome to “HTML and CSS for Newbies”!

In the ever-evolving landscape of technology, the ability to


understand and utilize programming languages has become
increasingly valuable. Among these languages, HTML and CSS
serve as the fundamental building blocks of the web. Whether
you’re a budding developer, a curious beginner, or simply
someone looking to expand their digital skill set, this book
is designed to provide you with a solid foundation in HTML
and CSS.

As the author of this book, Tatenda Josiah Majira, understands


the challenges that newcomers face when diving into the world
of web development. He has crafted this guide with the aim
of demystifying HTML and CSS, making them accessible to
anyone with the desire to learn. Through clear explanations,
practical examples, and hands-on exercises, Tatenda will take
you on a journey from the basics to more advanced concepts,
empowering you to create your own web pages and style them
to perfection.

Whether you dream of building your own website, pursuing a


v
career in web development, or simply want to better understand
the technology shaping our digital world, “HTML and CSS for
Newbies” is your starting point. Embrace the adventure ahead,
and let’s embark on this learning journey together.

Happy coding!

Tatenda Josiah Majira

vi
Introduction

In the vast landscape of web development, HTML and CSS


stand as the cornerstone technologies that shape the digital
world we interact with every day. HTML (Hypertext Markup
Language) provides the structure and content of web pages,
while CSS (Cascading Style Sheets) adds the visual presentation,
defining how those pages look and feel.

HTML serves as the skeleton of the web, providing a markup


language that structures content into elements such as headings,
paragraphs, images, and links. It forms the backbone of every
web page, organizing information in a hierarchical manner and
creating the foundation upon which websites are built.

On the other hand, CSS is the stylistic layer that breathes life
into HTML elements. With CSS, developers can control the
layout, typography, colors, and overall appearance of a web
page. By separating the content from its presentation, CSS
enables flexibility and consistency across a website, making it
easier to maintain and update.

Together, HTML and CSS empower developers to create


stunning and interactive web experiences that engage users
vii
and deliver information effectively. Whether you’re building a
personal blog, an e-commerce platform, or a corporate website,
mastering these technologies is essential for anyone venturing
into the realm of web development.

In this book, we’ll embark on a journey to explore the funda-


mentals of HTML and CSS, from the basics to more advanced
concepts. We’ll learn how to structure web pages, style them
with CSS, and create responsive designs that adapt to different
devices and screen sizes. Along the way, we’ll build practical
projects and gain hands-on experience to solidify our under-
standing of these essential web technologies.

Whether you’re a complete beginner or an experienced devel-


oper looking to brush up on your skills, this book is designed
to be your comprehensive guide to HTML and CSS. Let’s dive
in and unlock the endless possibilities of web development
together.

viii
1

Chapter 1

Getting Started

Text editor
First of all for you to start writing html or css you need to
have a text-editor in your laptop or phone .A text editor is an
application for writing text and saving them as a file eg Notepad
.

Examples of text editors :

1
HTML AND CSS FOR NEWBIES

I recommend you to download Sublime-text because its small


in size and easy to use .To install go to sublime https://www.su
blimetext.com/3

Steps on how to create a new html page file


1. Click File
2. Click New File
3. Press CTRL + S to save

2
CHAPTER 1

The window below will pop up after pressing CTRL + S and


then you type the name you want to give to the page .Inside the
File name box is where you type the name you want to give to
your html file.

3
HTML AND CSS FOR NEWBIES

4
CHAPTER 1

Note that after typing the name of page put .html so that it will
be saved as a webpage for it to open on a browser .The name of
my page is newbies.html.
If you don’t add .html on the file name of your page it won’t
open on browsers.
The same steps are done when you want to create a css file
.The difference is that when it is css you save your file as name
of file .css .

5
HTML AND CSS FOR NEWBIES

Your html file should have an icon of a web browser you use
.Mine has a google chrome icon because my default browser is
google.

6
CHAPTER 1

7
2

Chapter 2

Introduction

What is HTML and CSS ?

8
CHAPTER 2

HTML

HTML stands for Hypertext Markup Language.HTML defines


the structure of web page.
Don’t forget HTML defines the skeleton of a web page eg
paragraphs ,headers ,footers ,sections etc

CSS
HTML stands for Cascading Style Sheets.CSS defines the style
( visual ) of web page.
Don’t forget HTML defines the skin of a web page eg color
,background ,font ,border etc

9
HTML AND CSS FOR NEWBIES

From the above example the skeleton represents HTML and


then the man in suit represents CSS . The clothes and skin is
what we are calling styling or CSS.

10
CHAPTER 2

Differences between HTML and CSS

If HTML is the skeleton of your page, CSS is the skin .Without


CSS, your websites would look rather boring, dull, and, dare we
say, naked. In CSS, there is a property and a value. Property is
the quality you want to change; value is the amount of change.

1. HTML is basically a standard markup language for describ-


ing the structure of web pages, whereas CSS is the style sheet
language for describing the presentation and design of web
pages.

2. HTML is easy to learn and has clear syntax, whereas CSS can
sometimes get messy and can create complications in codes.

3. CSS is independent of HTML, and it can be used with any


XML-based markup language, whereas this is not the same case

11
HTML AND CSS FOR NEWBIES

with HTML.

4. The HTML file can contain CSS codes, but on the other
hand, CSS can never contain HTML codes in it.

5. HTML provides tags which are surrounding the content


of any web page elements, whereas CSS consists of selectors
which are surrounded by a declaration block

6. CSS has fragmentation, but HTML doesn’t produce any such


problems. 7. CSS uses a much lesser code and thus produce
much lesser web page loading time than HTML

12
3

Chapter 3

13
HTML AND CSS FOR NEWBIES

<HTML TAGS>

14
CHAPTER 3

15
HTML AND CSS FOR NEWBIES

16
CHAPTER 3

There many HTML tags but we going to show you


the basic and most important ones so that you
might be able to make your own basic web page
after reading this book.

HTML tags and their descriptions

17
HTML AND CSS FOR NEWBIES

Example of a basic HTML page

18
CHAPTER 3

Note the highlighted text are the tags that are inside the body
tag <p></p> and <h1></h1>

19
4

Chapter 4

<meta>
<meta name=“description” content=”Teaching newbies how to
code using HTML and CSS”>

20
CHAPTER 4

Information or values that are put inside the meta tag are the
one that we see when we search for something as on the picture
below

21
5

Chapter 5

<head> </head>
Inside the head tag is where we find meta tag , style tag (where
we put our CSS ) and links.

22
6

Chapter 6

<body> </body>
The <body> tag defines the document’s body. The <body>
element contains all the contents of an HTML document, such
as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Note: There can only be one <body> element in an HTML
document.

23
HTML AND CSS FOR NEWBIES

24
7

Chapter 7

<h1></1> to <h6></h6>
These tags are used to define HTML headings.

25
HTML AND CSS FOR NEWBIES

If you notice each and every H tag represents a certain size for
a text.

26
8

Chapter 8

<p></p>
This tag defines a paragraph.

27
HTML AND CSS FOR NEWBIES

28
9

Chapter 9

<img>
The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images
are linked to web pages. The <img> tag creates a holding space
for the referenced image.
The <img> tag has two required attributes:

• src - Specifies the path to the image


• alt - Specifies an alternate text for the image, if the image
for some reason cannot be displayed

29
HTML AND CSS FOR NEWBIES

30
CHAPTER 9

Note that inside the source (src) is where u put the path where
the image is located on and then the image name .In the above
example the name of my image is newbies.jpg. Make sure the
html file is in the same folder with image and CSS files.

31
10

Chapter 10

<li> </li>
These tags are used to group a set of related items in lists

32
CHAPTER 10

Unordered List <ul></ul>


An unordered list starts with the <ul> tag.Each list item starts
with the <li> tag.

Ordered List <ol></ol>


An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
The list items will be marked with numbers by default:

The HTML <ol> tag defines an ordered list. An ordered list can
be numerical or alphabetical.

33
HTML AND CSS FOR NEWBIES

34
11

Chapter 11

<table></table>
Theses tags are used to arrange data into rows and columns.

35
HTML AND CSS FOR NEWBIES

36
12

Chapter 12

<input>
These tags are used when we want to get user input from eg
register form , login form .

Types of input elements :

• <input type=“button”>
• <input type=“checkbox”>
• <input type=“color”>
• <input type=“date”>
• <input type=“datetime-local”>
• <input type=“email”>
• <input type=“file”>
• <input type=“hidden”>
• <input type=“image”>
• <input type=“month”>
• <input type=“number”>
37
HTML AND CSS FOR NEWBIES

• <input type=“password”>
• <input type=“radio”>
• <input type=“range”>
• <input type=“reset”>
• <input type=“search”>
• <input type=“submit”>
• <input type=“tel”>
• <input type=“text”>
• <input type=“time”>
• <input type=“url”>
• <input type=“week”>

38
CHAPTER 12

As you can see the output of the inputs tags on the webpage
presented well .To put them in order we use the <br> it breaks
or creates a new empty line

39
HTML AND CSS FOR NEWBIES

40
CHAPTER 12

41
HTML AND CSS FOR NEWBIES

The name of the input element determines type of data allowed


or the output to b displayed on the page .For you to be able to
collect information from the user most of the input elements
are put inside the form tag <form><form> which we will talk
about in next chapter.

42
13

Chapter 13

<form> </form>
This <form> element is used to create an HTML form for user
input:

43
HTML AND CSS FOR NEWBIES

<label> </label>

The <label> tag defines a label for many form elements.


The <label> element is useful for screen-reader users, because
the screen-reader will read out loud the label when the user
focus on the input element.

The id attribute specifies a unique id for an HTML element.


The value of the id attribute must be unique within the HTML
document.
The id attribute is used to point to a specific style declaration
in a style sheet.

44
CHAPTER 13

45
14

Chapter 14

<a href = “” ></a>


Links are found in nearly all web pages. Links allow users to
click their way from page to page.
Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will
turn into a little hand
<a href =“url”>link text</a>
The most important attribute of the <a> element is the href
attribute, which indicates the link’s destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified
URL address.

<a href=“https://www.google.com/”>Google</a>

46
CHAPTER 14

If you click on the text Google it will direct you to Google page

47
HTML AND CSS FOR NEWBIES

Links or <a></a> can be used to link your html pages .In


the following example we going to create a html file called
newbies2.html so that we can locate it from newbie.html we
have already created. Make sure both your html files are in the
same folder.

Inside the newbies2.html file write

48
CHAPTER 14

Now go to the newbie.html file and put a link like below.

Now click on the link below and it will direct you to newbies2
page.

49
HTML AND CSS FOR NEWBIES

Newbies2 page

So far we have covered the basic and most important html


elements therefore what is left is for you to know how to style
html elements

50
15

Chapter 15

<style></style>
The HTML style attribute is used to add styles to an element,
such as color, font, size, and more.
<tagname style=“property:value;”>

This tag can be used inside the head tag to style elements inside
the body but for the mean time will focus on styling inside the
tag.

51
HTML AND CSS FOR NEWBIES

52
16

Chapter 16

Id and class

53
HTML AND CSS FOR NEWBIES

Below is how you use the IDs and Classes inside the <style>
using css .

54
17

Chapter 17

Like discussed in the the first chapter css is used for styling the
html page or elements .

55
HTML AND CSS FOR NEWBIES

Example:

56
CHAPTER 17

External stylesheet is circled in red


Internal stylesheet is circled in blue
Inline stylesheet is circled in yellow
Tips :

We can link styles.css to newbies.html by adding the following


line to the <head> of our HTML doc:
<head>
// …

<link rel=“stylesheet” href=“css/style.css”></head>

How to create an external stylesheet


Create a new file and name it styles.css .CSS files are saved
with .css so that the styles will load and not be respond as plain

57
HTML AND CSS FOR NEWBIES

text.

58
CHAPTER 17

Inside the styles.css is where we put our css codes .Now we


have to link our external css stylesheet (styles.css) inside the
head of our newbies.html for us to be able to style the elements
while we are not inside the html file.

59
HTML AND CSS FOR NEWBIES

60
18

Chapter 18

Common CSS Properties

Color
Font Size
Background Color
Background

61
HTML AND CSS FOR NEWBIES

Height/Width
Box Model (Margin/Padding)
Border
Border Radius

We are going to use the above css properties in our external


stylesheet that we have created to style newbies.html

Inside our newbies.html file put the following elements

Then inside our styles.css we going to start styling using the


color property:

62
19

Chapter 19

Color
This is most used property in css .It is used for changing the
text color .
There are multiple valid formats for color values, however
the most common are hex values, rgba and named colors

/* Hex Value */
color: #000000;

/* RGBA */
color: rgba(0, 0, 0, 0.3);

/* Named Colors */
color: black;
As newbies using named colors is much easier and simple
63
HTML AND CSS FOR NEWBIES

64
20

Chapter 20

Font Size
This property is used to specify the size of text .
The font-size property allows us to change the size of the font
for any text based content. This includes <h1> to <h6> tags ,
<a> tag,<p> tags etc

65
HTML AND CSS FOR NEWBIES

In real world we use cm or inches when specifying th size of


something but in css and html we use pixels ( px ) .

66
21

Chapter 21

Background Color
The background-color property allows you to set the
background-color of an HTML element. Just like text color,
the value of this property can be a hex value, rgba or named
color.
The background color can be set like so:

67
HTML AND CSS FOR NEWBIES

68
22

Chapter 22

Height/Width
The height and width properties specify the height and width of
a HTML element respectively. There are many different values
you can apply to both of these properties, but for this tutorial
we’ll focus on pixels (px) and percentages (%)

69
HTML AND CSS FOR NEWBIES

Note that the width and height of the <p> text has changed

70
23

Chapter 23

Border
The border property allows you set a border for your HTML
element. We can create a border around our <img> element
with the following syntax:

71
HTML AND CSS FOR NEWBIES

72
CHAPTER 23

As you can see the image is now surrounded by a blue border.

73
24

Chapter 24

Background Image
The background-image property allows us to add a background
image to an HTML element. This is similar to the background
color, however an image is shown instead of a color.
We are going to put a background image on the h1 tag

74
CHAPTER 24

75
25

Chapter 25

Border-Radius
The border-radius property allows you to add rounded corners
of a HTML elements. This can be especially useful for adding
rounded corners to buttons and images.
In action, if we wanted to round the corners of an <img>
element, we could add the following in our stylesheet:

76
CHAPTER 25

Note that the image will change on its corners after styling with
border-radius property

77
HTML AND CSS FOR NEWBIES

78
CHAPTER 25

79
HTML AND CSS FOR NEWBIES

80
About the Author

Tatenda Josiah Majira is a seasoned web developer, educator,


and author passionate about making technology accessible
to everyone. With years of experience in the field of web
development, Tatenda has honed his skills in HTML, CSS, and
various other programming languages.

Throughout his career, Tatenda has worked on numerous


web development projects, ranging from personal blogs to
complex e-commerce websites. His hands-on experience has
equipped him with practical insights into the challenges faced
by beginners in the field, inspiring him to create educational
resources to simplify the learning process.

Driven by a desire to empower others, Tatenda has dedicated


himself to teaching and mentoring aspiring developers. He
believes that everyone should have the opportunity to learn
and thrive in the ever-evolving world of technology. Through
81
his writing, workshops, and online courses, Tatenda strives
to make complex concepts understandable and applicable to
learners of all backgrounds.

“HTML and CSS for Newbies” is the latest addition to Tatenda’s


portfolio of educational materials. Drawing from his wealth of
experience and expertise, Tatenda has crafted a comprehensive
guide that breaks down the core principles of HTML and CSS in
a clear and accessible manner. His goal is to equip readers with
the skills they need to create their own websites and embark
on their journey in web development with confidence.

Beyond his work in web development and education, Tatenda


is known for his dedication to community engagement and
advocacy for diversity and inclusion in the tech industry. He
actively participates in outreach programs and initiatives aimed
at bridging the digital divide and creating opportunities for
underrepresented groups in technology.

As an author, educator, and advocate, Tatenda Josiah Majira


continues to inspire and empower individuals to pursue their
passion for technology and embark on meaningful journeys in
the world of web development.

82
Also by Tatenda J Majira

Summoning a demon AI
Exploring the Dark Side of Artificial
Intelligence” delves into the shadows of
technology to uncover the darker implica-
tions of artificial intelligence. Written by
computer systems engineer Tatenda Majira,
this thought-provoking book examines the
ethical dilemmas, societal impacts, and
potential risks associated with AI, from privacy violations
and algorithmic biases to job displacement and the erosion
of human autonomy. Through insightful analysis and real-
world examples, Tatenda Majira navigates the complexities of
AI’s dark side, challenging readers to confront the ethical and
social implications of unleashing advanced AI technologies. A
must-read for anyone interested in understanding the darker
dimensions of AI and its impact on society.

83

You might also like