Scribd
Upload
0 views

Web Development Task1

Uploaded by

Ravi Goswami
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

Web Development Task1

Uploaded by

Ravi Goswami
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

Web Development Task -1

HTML/CSS Learning Notes

• Submitted by: Devesh Goswami • Submitted to : Achintya


• Role: Intern (Thathastu) Gaumat
• Email: [email protected] (Founder & Chief Mentor at
Two Waits)
• Mobile No.: 7017271624
• Date : 07/07/2022
HTML:-

what is HTML?
HTML (HyperText Markup Language) is a markup language that
defines the structure of your content. HTML consists of a series
of elements, which you use to enclose, or wrap, different parts of
the content to make it appear a certain way, or act a certain way.
The enclosing tags can make a word or image hyperlink to
somewhere else, can italicize words, can make the font bigger or
smaller, and so on. For example, take the following line of content:
If we wanted the line to stand by itself, we could specify that it is a
paragraph by enclosing it in paragraph tag:

<p>My cat is very grumpy</p>>

Anatomy of an HTML Element & Their Working:

The main parts of our element are as follows:


The opening tag: This consists of the name of the element (in this
case, p), wrapped in opening and closing angle brackets. This states
where the element begins or starts to take effect — in this case
where the paragraph begins.
The closing tag: This is the same as the opening tag, except that it
includes a forward slash before the element name. This states where
the element ends — in this case where the paragraph ends. Failing to
add a closing tag is one of the standard beginner errors and
can lead to strange results.
The content: This is the content of the element, which in this
case, is just text.
The element: The opening tag, the closing tag, and the
content together comprise the element.
Elements can also have attributes that look like the following:

Attributes contain extra information about the element that you


don't want to appear in the actual content. Here, class is the
attribute name and editor-note is the attribute value.
The class attribute allows you to give the element a non-unique
identifier that can be used to target it (and any other elements with
the same class value) with style information and other things.
An attribute should always have the following:
A space between it and the element name (or the previous attribute,
if the element already has one or more attributes).
The attribute name followed by an equal sign.
The attribute value wrapped by opening and closing quotation
marks.
Nesting elements:
You can put elements inside other elements too — this is
called nesting. If we wanted to state that our cat is very grumpy, we
could wrap the word "very" in a <strong> element, which means
that the word is to be strongly emphasized:
<p>My cat is <strong>very</strong> grumpy.</p>

Empty elements:
Some elements have no content and are called empty elements.
Take the <img> element that we already have in our HTML page:
<img src="images/firefox-icon.png" alt="My test image">
This contains two attributes, but there is no closing </img> tag and
no inner content. This is because an image element doesn't wrap
content to affect it. Its purpose is to embed an image in the HTML
page in the place it appears.

Anatomy of an HTML document:


That wraps up the basics of individual HTML elements, but they
aren't handy on their own. Now we'll look at how individual
elements are combined to form an entire HTML page. Let's revisit
the code we put into our index.html example :

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test
image">
</body>
</html>
Copy to Clipboard
Here, we have the following:
<!DOCTYPE html> — doctype. In the mists of time, when HTML
was young (around 1991/92), doctypes were meant to act as links to
a set of rules that the HTML page had to follow to be considered
good HTML, which could mean automatic error checking and other
useful things. However these days, they don't do much and are
basically just needed to make sure your document behaves correctly.
That's all you need to know for now.j
<html></html> — the <html> element. This element wraps all the
content on the entire page and is sometimes known as the root
element.
<head></head> — the <head> element. This element acts as a
container for all the stuff you want to include on the HTML page
that isn't the content you are showing to your page's viewers. This
includes things like keywords and a page description that you want
to appear in search results, CSS to style our content, character set
declarations, and more.
<meta charset="utf-8"> — This element sets the character set your
document should use to UTF-8 which includes most characters from
the vast majority of written languages. Essentially, it can now handle
any textual content you might put on it. There is no reason not to set
this and it can help avoid some problems later on.
<title></title> — the <title> element. This sets the title of your
page, which is the title that appears in the browser tab the page is
loaded in. It is also used to describe the page when you
bookmark/favorite it.
<body></body> — the <body> element. This contains all the
content that you want to show to web users when they visit your
page, whether that's text, images, videos, games, playable audio
tracks, or whatever else.

Images :
Let's turn our attention to the <img> element again:

<img src="images/firefox-icon.png" alt="My test image">


As we said before, it embeds an image into our page in the position it
appears. It does this via the src (source) attribute, which contains the
path to our image file.
We have also included an alt (alternative) attribute. In this attribute,
you specify descriptive text for users who cannot see the image,
possibly because of the following reasons:
They are visually impaired. Users with significant visual impairments
often use tools called screen readers to read out the alt text to them.
Something has gone wrong causing the image not to display. For
example, try deliberately changing the path inside your src attribute
to make it incorrect. If you save and reload the page, you should see
something like this in place of the image:

Marking up text
This section will cover some of the essential HTML elements you'll
use for marking up the text.

Headings:
Heading elements allow you to specify that certain parts of your
content are headings — or subheadings. In the same way that a book
has the main title, chapter titles, and subtitles, an HTML document
can too. HTML contains 6 heading levels, <h1> - <h6>, although
you'll commonly only use 3 to 4 at most:

<!-- 4 heading levels: -->


<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
Paragraphs:
As explained above, <p> elements are for containing paragraphs of
text; you'll use these frequently when marking up regular text
content:

<p>This is a single paragraph</p>

Lists :
A lot of the web's content is lists and HTML has special elements for
these. Marking up lists always consists of at least 2 elements. The
most common list types are ordered and unordered lists:
Unordered lists are for lists where the order of the items doesn't
matter, such as a shopping list. These are wrapped in
a <ul> element.
Ordered lists are for lists where the order of the items does matter,
such as a recipe. These are wrapped in an <ol> element.
Each item inside the lists is put inside an <li> (list item) element.
For example, if we wanted to turn the part of the following
paragraph fragment into a list

<p>At Mozilla, we're a global community of technologists,


thinkers, and builders working together ... </p>

We could modify the markup to this:


<p>At Mozilla, we're a global community of</p>

<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>

<p>working together ... </p>

Links:

Links are very important — they are what makes the web a web! To
add a link, we need to use a simple element — <a> — "a" being the
short form for "anchor". To make text within your paragraph into a
link, follow these steps:
Choose some text. We chose the text "Mozilla Manifesto".
Wrap the text in an <a> element, as shown below:
<a>Mozilla Manifesto</a>
Give the <a> element an href attribute, as shown below:
<a href="">Mozilla Manifesto</a>
Fill in the value of this attribute with the web address that you want
the link to:
<a href="https://www.mozilla.org/en-
US/about/manifesto/">Mozilla
Manifesto</a>
CSS( CASCADDING STYLE SHEET)

What is CSS?
Like HTML, CSS is not a programming language. It's not a markup
language either. CSS is a style sheet language. CSS is what you
use to selectively style HTML elements. For example, this CSS selects
paragraph text, setting the color to red:

p{
color: red;

}
• Open your index.html file. Paste the following line in the
head (between the <head> and </head> tags):
1. <link href="styles/style.css"
rel="stylesheet">

• Save index.html and load it in your browser.

Anatomy of a CSS ruleset ,Their Working &


Code Implementation:
Let's dissect the CSS code for red paragraph text to understand how it
works :
The whole structure is called a ruleset. (The term ruleset is often
referred to as just rule.) Note the names of the individual parts:

Selector
This is the HTML element name at the start of the ruleset. It defines
the element(s) to be styled (in this example, <p> elements). To style
a different element, change the selector.

Declaration
This is a single rule like color: red;. It specifies which of the
element's properties you want to style.

Properties
These are ways in which you can style an HTML element. (In this
example, color is a property of the <p> elements.) In CSS, you
choose which properties you want to affect in the rule.

Property value
To the right of the property—after the colon—there is the property
value. This chooses one out of many possible appearances for a
given property. (For example, there are many color values in
addition to red.)
Note the other important parts of the syntax:
Apart from the selector, each ruleset must be wrapped in curly
braces. ({})
Within each declaration, you must use a colon (:) to separate the
property from its value or values.
Within each ruleset, you must use a semicolon (;) to separate each
declaration from the next one.
To modify multiple property values in one ruleset, write them
separated by semicolons, like this:

p{
color: red;
width: 500px;
border: 1px solid black;
}

Selecting multiple elements


You can also select multiple elements and apply a single ruleset to all of them. Separate multiple
selectors by commas. For example:
p, li, h1 {
color: red;
}

Different types of selectors


There are many different types of selectors. The examples above
use element selectors, which select all elements of a given type.
But we can make more specific selections as well. Here are some of
the more common types of selectors:
Selector name What does it select Example
Element selector
(sometimes called a All HTML elements of the p
tag or type specified type. selects <p>
selector)
The element on the page
#my-id
with the specified ID. On a
ID selector selects <p id="my-id"> or <a
given HTML page, each id
id="my-id">
value should be unique.
The element(s) on the page
.my-class
with the specified class.
selects <p class="my-
Class selector Multiple instances of the
class"> and <a class="my-
same class can appear on a
class">
page.
img[src]
The element(s) on the page selects <img
Attribute selector
with the specified attribute. src="myimage.png"> but
not <img>
The specified element(s), but a:hover
Pseudo-class only when in the specified selects <a>, but only when the
selector state. (For example, when a mouse pointer is hovering over the
cursor hovers over a link.) link.

Fonts and text:


Now that we've explored some CSS fundamentals, let's improve the
appearance of the example by adding more rules and information to
the style.css file.
First, find the output from Google Fonts that you previously saved
from What will your website look like?. Add the <link> element
somewhere inside your index.html's head (anywhere between
the <head> and </head> tags). It looks something like this:
1. <link
href="https://fonts.googleapis.com/css
?family=Open+Sans" rel="stylesheet">
This code links your page to a style sheet that loads the Open Sans
font family with your webpage.
Next, delete the existing rule you have in your style.css file. It was a
good test, but let's not continue with lots of red text.
Add the following lines (shown below), replacing the font-
family assignment with your font-family selection from What will
your website look like?. The property font-family refers to the
font(s) you want to use for text. This rule defines a global base font
and font size for the whole page. Since <html> is the parent
element of the whole page, all elements inside it inherit the
same font-size and font-family.
2. html {
3. font-size: 10px; /* px means
"pixels": the base font size is now 10
pixels high */
4. font-family: "Open Sans", sans-
serif; /* this should be the rest of
the output you got from Google fonts
*/
}
Now let's set font sizes for elements that will have text inside the
HTML body (<h1>, <li>, and <p>). We'll also center the heading.
Finally, let's expand the second ruleset (below) with settings for line
height and letter spacing to make body content more readable.

h1 {
font-size: 60px;
text-align: center;
}

p, li {
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}

CSS: all about boxes:


Something you'll notice about writing CSS: a lot of it is about boxes.
This includes setting size, color, and position. Most HTML elements
on your page can be thought of as boxes sitting on top of other
boxes.

CSS layout is mostly based on the box model. Each box taking up
space on your page has properties like:
padding, the space around the content. In the example below, it is
the space around the paragraph text.
border, the solid line that is just outside the padding.
margin, the space around the outside of the border.
In this section we also use:
width (of an element).
background-color, the color behind an element's content and
padding.
color, the color of an element's content (usually text).
text-shadow sets a drop shadow on the text inside an element.
display sets the display mode of an element. (keep reading to
learn more)

Changing the page color


html {
background-color: #00539F;
}
This rule sets a background color for the entire page
Styling the body
body {
width: 600px;
margin: 0 auto;
background-color: #FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
There are several declarations for the <body> element. Let's go
width: 600px; This forces the body to always be 600 pixels wide.
margin: 0 auto; When you set two values on a property
like margin or padding, the first value affects the element's
top and bottom side (setting it to 0 in this case); the second value
affects the left and right side. (Here, auto is a special value that
divides the available horizontal space evenly between left and right).
You can also use one, two, three, or four values, as documented
in Margin Syntax.
background-color: #FF9500; This sets the element's
background color. This project uses a reddish orange for the body
background color, as opposed to dark blue for the <html> element.
(Feel free to experiment.)
padding: 0 20px 20px 20px; This sets four values for padding.
The goal is to put some space around the content. In this example,
there is no padding on the top of the body, and 20 pixels on the
right, bottom and left. The values set top, right, bottom, left, in that
order. As with margin, you can use one, two, three, or four values,
as documented in Padding Syntax.
border: 5px solid black; This sets values for the width, style and
color of the border. In this case, it's a five-pixel–wide, solid black
border, on all sides of the body.
through these line-by-line:

Positioning and styling the main page title:


h1 {
margin: 0;
padding: 20px 0;
color: #00539F;
text-shadow: 3px 3px 1px black;
}

You may have noticed there's a horrible gap at the top of the body.
That happens because browsers apply default styling to
the <h1> element (among others). That might seem like a bad idea,
but the intent is to provide basic readability for unstyled pages. To
eliminate the gap, we overwrite the browser's default styling with
the setting margin: 0;.
Next, we set the heading's top and bottom padding to 20 pixels.
Following that, we set the heading text to be the same color as the
HTML background color.
Finally, text-shadow applies a shadow to the text content of the
element. Its four values are:
The first pixel value sets the horizontal offset of the shadow from
the text: how far it moves across.
The second pixel value sets the vertical offset of the shadow from
the text: how far it moves down.
The third pixel value sets the blur radius of the shadow. A larger
value produces a more fuzzy-looking shadow.
The fourth value sets the base color of the shadow.

Centering the image


img {
display: block;
margin: 0 auto;
}
Next, we center the image to make it look better. We could use
the margin: 0 auto trick again as we did for the body. But there
are differences that require an additional setting to make the CSS
work.
The <body> is a block element, meaning it takes up space on the
page. The margin applied to a block element will be respected by
other elements on the page. In contrast, images
are inline elements, for the auto margin trick to work on this image,
Thank You!

You might also like