Mini Project Presentation-Merged

Name-Hariom
Roll no- 2200320130086

Branch-Information technology
Section-B
Structure
HTML CSS
css
Introduction to html
HTML, which stands for HyperText Markup Language, is the fundamental

language used to create web pages on the World Wide Web. It serves as
the backbone of every web page, providing the structure and content
that web browsers use to display information to users. HTML uses a
system of tags and elements to deﬁne the structure and content of a web
page.
An Example
►A paragraph is your content
►Putting your content into an HTML

tag to make it look like a
paragraph is structure
<p>This is the
content</p>
HTML Elements
and Tags
►Anelement is an individual
component of HTML
► paragraph, image, header,...

► an element name indicates its
purpose: p for paragraph
►A tag marks the beginning and the
end of an HTML element
► Opening tag and Closing Tag
HTML Tag Breakdown
Taken from http://girldevelopit.github.io/gdi-featured-html-css-intro/class1.html#/16

Anatomy of an HTML element
Container Element
- An element that can contain other elements or

content
- A paragraph (<p>content</p>) contains text
Stand Alone Element
- An element that cannot contain anything else

- <br/>, <img/>
Anatomy of an HTML element
Attribute
- Provides additional information about the HTML element

- Class, ID, language, style, identity, source
- Placed inside an opening tag, before the right angle
bracket.
Value
- Value is the value assigned to a given attribute.

- Values must be contained inside quotation marks.
<img src="my_picture.jpg" />

<!DOCTYPE>
The <!DOCTYPE> declaration represents the document type, and helps browsers
to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DoCtYpE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is <!DOCTYPE html>

Nesting
All elements "nest" inside one another
Nesting is what happens when you put tags inside other containing tags.
For example, you would put the <p> inside of the <body> tags. The <p>
is now nested inside the <body>
<body>
<p>The paragraph goes here.</p>
</body>
Whichever element OPENS first CLOSES last

Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading
<h1>This is heading
1</h1>
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
Paragraphs
HTML paragraphs are defined with the <p>
tag:
<p>This is a paragraph</p> <p>Paragraph

2</p>
The Poem Problem and Line Breaks
This poem will display in a single
line:
<p>
My Bonnie lies over the ocean. The browser will remove
My Bonnie lies over the sea. any extra spaces and extra
My Bonnie lies over the ocean.
lines when the page is
Oh, bring back my Bonnie to me.
</p>
displayed
The <br> element defines a line break without starting a new

paragraph.
<p>
My Bonnie lies over the ocean. <br>
My Bonnie lies over the sea. <br>
My Bonnie lies over the ocean. <br>
Oh, bring back my Bonnie to me.
</p>
Preformatted Text
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually

Courier), and it preserves both spaces and line breaks.
<pre>
My Bonnie lies over the sea.
This will be shown
Oh, bring back my Bonnie to me. correctly with line breaks
</pre> preserved.
Formatted Text
<p>
Here is a paragraph with <em>emphasized</em> text and <strong>important</strong> text.
</p>
<p>
Here is another paragraph with <i>Italic</i> text and <b>Bold</b> text.
</p>
Here is a paragraph with Emphasized text and

Important
text.
Here is another paragraph with Italic text and Bold
Formatted Text
<p>Here is a <mark>highlighted</mark> text and this is <small>smaller</small> text.</p>
Here is atext and this is

Highlighted smaller text.
<p>Here is <del>some deleted</del> text and this is <ins>some inserted</ins> text.</p>
Here is some deleted text and this is some inserted

text.
<p>This is <sup>superscripted</sup> text and this is <sub>subscripted</sub> text.</p>
superscripted
Here is text and this is subscripted
text.
Character Codes
Many mathematical, technical, and currency
symbols, are not present on a normal
keyboard.
To add such symbols to an HTML page, you can

use an HTML entity name or code.
One character that I use most is
See here for a complete list

Links
HTML links are defined with the <a> tag
The link's destination is specified in the href attribute.
target attribute specifies where to open the linked

document(_self,_blank,...)
<a href="http://www.google.com" target="_blank">This is a link to Google!</a>
This is a link to
Google!
Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are
provided as attributes.
<img src="fsu-logo.jpg" alt="FSU Logo" width="104" height="142">

Relative vs. Absolute paths for links &
Images
Relative paths change depending upon the page the link is on
- Links within the same directory need no path information. "filename.jpg"

- Subdirectories are listed without preceding slashes. "img/filename.jpg"
Absolute paths refer to a specific location of a file, including the domain
- Typically used when pointing to a link that is not within your own
domain.
- http://one.fsu.edu/alumni/image/community/clubs/FSU-Seal-full-color.jpg
Lists
Unordered list (bullets)
<ul>
● List Item <li>List Item</li>
<li>Another List Item</li>
● Another List Item
</ul>
Ordered list
<ol>
(sequence)
<li>List Item</li>
1. List Item <li>Another List Item</li>
2. Another List Item </ol>
Tables
Tables are a way to represent
complex information in a grid <table>
<tr>
format. <th>Head</th>
<th>Head</th>
Tables are made up of rows </tr>
and columns. <tr>
<td>Data</td>
<td>Data</td>
</tr>
</table>
Tables
Tables can be styled with CSS to add
zebra striping or to highlight
important rows/columns.
Extra functionality can be added to

tables like filtering or sorting rows
and columns.
Comments
You can add comments to your code that will not be seen by the browser, but
only visible when viewing the code.
Comments can be used to:
- organize your code into sections

- 'comment out' large chunks of code to hide it from the browser.


<div id="header">Header Content </div>

Introduction to Css
Cascading Style Sheets, is a fundamental
technology used in web development to control the
presentation and layout of web pages. It serves as a
powerful tool for web designers and developers to
style and format HTML documents, making them
visually appealing and user-friendly. CSS allows you
to deﬁne how elements on a webpage should look,
including their colors, fonts, spacing, positioning,
and more.
A brief history
CSS 1 CSS 2 CSS 3
HTML HTML 2 HTML 3 & 4 XHTML HTML 5
1991 1995 1997 2000 2014

How is
CSS
applied?
CSS Inline CSS
Stylesheets
Stylesheet
.center {
text-align: center;
}
.underline {
text-decoration : underline;
}
.blue { color:
blue;
}
CSS syntax
h1 {
3. Value
1. Selector
What are you

color: red; What’s the value?
Properties have specific
selecting? What values that are
element do you want to applicable e.g. red.
apply CSS to e.g. H1. }
2. Property
What’s the property?

What are you trying to change?
E.g. ‘color'
CSS
properties
What’s useful to
learn?
Font-family (chooses the font)
Font-size (chooses the font size)
Text-align (chooses text orientation)
Background-color (sets the background color)

The
box
model
The certificate is awarded to
Hariom .
for successfully completing the course
HTML5 - The Language

on September 24, 2023
Issued on: Sunday, September 24, 2023

To verify, scan the QR code at https://verify.onwingspan.com
The certificate is awarded to
Hariom .
for successfully completing the course
CSS3
on September 4, 2023
Issued on: Monday, September 4, 2023

To verify, scan the QR code at https://verify.onwingspan.com

Mini Project Presentation-Merged

Uploaded by

Copyright:

Available Formats

Mini Project Presentation-Merged

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mini Project Presentation-Merged

Uploaded by

Copyright:

Available Formats

Name-Hariom

Roll no- 2200320130086

HTML, which stands for HyperText Markup Language, is the fundamental

►A paragraph is your content

►Putting your content into an HTML

► paragraph, image, header,...

Taken from http://girldevelopit.github.io/gdi-featured-html-css-intro/class1.html#/16

- An element that can contain other elements or

Stand Alone Element

- An element that cannot contain anything else

- Provides additional information about the HTML element

- Value is the value assigned to a given attribute.

<img src="my_picture.jpg" />

The <!DoCtYpE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is <!DOCTYPE html>

Whichever element OPENS first CLOSES last

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

The <br> element defines a line break without starting a new

The text inside a <pre> element is displayed in a fixed-width font (usually

Here is a paragraph with Emphasized text and

Here is atext and this is

Here is some deleted text and this is some inserted

To add such symbols to an HTML page, you can

&nbsp; See here for a complete list

The link's destination is specified in the href attribute.

target attribute specifies where to open the linked

<a href="http://www.google.com" target="_blank">This is a link to Google!</a>

<img src="fsu-logo.jpg" alt="FSU Logo" width="104" height="142">

- Links within the same directory need no path information. "filename.jpg"

Absolute paths refer to a specific location of a file, including the domain

Extra functionality can be added to

Comments can be used to:

- organize your code into sections

CSS 1 CSS 2 CSS 3

HTML HTML 2 HTML 3 & 4 XHTML HTML 5

1991 1995 1997 2000 2014

What are you

What’s the property?

Font-family (chooses the font)

Font-size (chooses the font size)

Text-align (chooses text orientation)

Background-color (sets the background color)

HTML5 - The Language

Issued on: Sunday, September 24, 2023

Issued on: Monday, September 4, 2023

You might also like

See here for a complete list