Scribd
Upload
28 views

Assignment - 1 Webtech

HTML is used to structure and format content on web pages. It is a markup language that uses tags to define headings, paragraphs, images and other elements. CSS is used to define styles and layouts for HTML elements. CSS allows changing fonts, colors, spacing and more to enhance the look of web pages. Together HTML provides content structure and CSS handles presentation.

Uploaded by

Caption Star
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
28 views

Assignment - 1 Webtech

HTML is used to structure and format content on web pages. It is a markup language that uses tags to define headings, paragraphs, images and other elements. CSS is used to define styles and layouts for HTML elements. CSS allows changing fonts, colors, spacing and more to enhance the look of web pages. Together HTML provides content structure and CSS handles presentation.

Uploaded by

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

AS51GNMENT-15

60ESTLON=1
Ekplain Hhe prpae HIML o JAs role in web
dauelopmant

ANScOE.R
HIML
HTML sand.s fox Hypen text Mcukup
languaga
HTML is a programming languago tad
ddin the shsuchahe and ayou o caeb pages
Nalouas content casates to speidy hiadngs
pancgiphs,imogesylinta Qmn) othen elements

HTML fs rod1 up elemnìs or fags and


att bates:

PORPOSE OE HML.
HTML is wd to cou ate and structw
conteot gon thi woeb
HIML ls uàLd to disian the basic
hyout cnd tonmating al wcb pages
HTM s uard to dovalop gem in
twsing csS ano dova Sconipl
HoLE O£ HTML IN WEB
DEVELOPMEND
ML helbsweb divelop ons
taebsite hat 0u coede
easy to wa an

dhuelopmart , coe nud som


tanguages
oebsite od enhcnce Hs leok and
Junctors
Web deuclaprmntis den in too ptsi
Faonlendand Backend Developank
> HTML is Latd in the onten ð pant
pant
DeAGE

60GSON- 2ND

DescÓibe the shuct o an HTML


documgnt , including ths eSsental
olemnts

ANSOER

STEOCTUR6 OE AN
HIML DocuMENT
An HtML Documort is mcun lå cividid intwo
too pauths
HEAD: Ths cortains the infomaion aboud
tal HTM doumont
For example
thi tlo o t pages
vension HIMLMeta Dta etc
BODY: This contains eueatthg sou taant to
dIsplay on thl tweb page
<!DoCTYpe ntml>
<htm
<heod
<HHe> oge tie </HHe>
</heao
bodg>
<hi) hacolins contontK/h
<p groph content </p>
</6cdy>
Shtm

DUsTLON
tUite an HIML code sniopet to canate
an nduNed list(o)oHh tt ist
l4oms(LI)
ANSOGR

<htm
<head
<tiHe> Lista) ElemantsHe)
<lhod
<body
<A SoETGOARE COMPANLES </h3
Kdi) Micnosoft Caap:&i
<ui) Oacle Coap
<li) SAPSE </
<lo
<body
<(htm
60cSTLON- RTM

How can you Colate a hypeanlink in HIML!


on xample
Paovica On an absolte UR

ANSOER
HYPERLINK JN HIML
o cocate a hypan l'in k th html you
can s the hoo atfoibte
For exomple

An absolute URL Ubld to link to usoUNCLA


an web pages,it includs the ebsite addns

Absolue ORUs neven changes


yNTAX
Ka houf= absolute URLlinktext Sa
EXAMPE of an absolude ORL -
Of
<html
<head
<tit te boatanbot/title>
<lheoa
<body>h3> Hypevtext MQskup LanguK0)
</6coy
</ntm

60cSTION- 5TH
Explain thidifena between TML
tags and otibates Gaive Qn example
each.
ANSOER
DIEEERENCE Bl HIM, tags and
atibudes

HTML tags
oLd to hol ho HTML
HIML togs
elemont
Ons

HTMC to9s must encosed co'thin


<thA brackats

HTML tags ans almost ik keycooek


Ghun os Bingle tag had tintq,u.
oam basic tags au

<ht Bmallust heoding

<i) italie
<u) 'ndunlin
<bheuak t ins
<ha fatting lin ocMGSs hs webpage
<htm
<had)
<UHe Heady </HHe)

<heBAeid'ng </h
<h6 Hec K/hs
<iK<u)Anshu</u</>
<Zhtml
HTML Attibutes -
AlL htmn elemnts can hVe attibutes
" Ataibudes prcvidu aoakoral inonmoten
about elemnts or tags
DATE
PAGE

LAthibutes atu aletayS. speheo in th


Siant tag
Atbibute s usualy com in namu/vol
fainsik1
<ag nom zívale
Same ntml attibutos -
ha = Speciies thi URL a Hh poge
3Sc Soeihes the patthtå Haemage
Qlt Speziy Cn altenncata text
Stale = ta add stulos to cn element

halght= Speci h haiaht


60ESTON-6TH
-aShat ts the puhpase HIMLors
and hoto do you Chscdo a yorm
Anssoen
PORPOSE OF
HTML
FORMS
SATE
PAGE

An HIML TonYn is o loay 707 wans to.


enton data in to a wcbstho
HIMLdomioocontinz_teL fo
collect submit use input
such aS- collect was cedback,
-rocessing cads.
Signing p or neuosleten
CREALE AFORM
ceuate a tom <lorm eleman
To

Jyntax
Klorm action= page tink)l tange Lblankl
matha = get/os
achion acton otttbute spocities th oRL

mothod tenmdaiasoll
gpeiles heu
howth
Common muthod
TE
iAGE

6UESTION- ZNTH
Descenibe the semant'c HTMLS elemsn ts
davelopmant
Ansoeh
SEMANTC HTML5
ELEMENTS

* Semantic HIMU5 elenants Aa yntax


that helo stouctns cade and make
Aoosian to auad and maintain Thy
baue mAnirl nams that dscoibe
heacnyoatad
’ Semontc elemnts ane tmportn! toaL
tly
Helb stucHTU Cad
aki cod eandn totaite anstndstand don
duelap9s
Improve acessibiky
ooe phabhle.
* Some semmtc clemnl s
<headu:topg) a documolh sschon ycnticle
Khipoupimaln haadiny oith en on mene suáhedi
<stammoan Shou Jhu mUn hucdincg thuditorlt
<im Used ta tog teimu co dotetm.
<tguu3peufes sol-contajnsd Cnter
<toote> Dens a yoote for adocumnt
<mcun Speaias tismaun conten+

60ESTION-gTH
exteh a
Uate HTMLCod to embed cn
VidLo usng Heitrcim element
ANSOER
STEPS TO EMBED AN EXTERNA ) VDEO -

4. Coa ote anHTMI documnt


n te HTML
1

2 mplomlnt 'a vido


dot ument
tag

Cutoplay jmudl
maks language
tat dsign
sheets stye codi
nq cas stonds
or CSS
Role
its ond CSS
ANSwER
MML dionE
om is
iHHaco
dosjon. web in ole its Cnod CSS Define
qNTHSTION- bUE
KIhtml
Sp> playenMutmud'a <e
</foamu so ht
haia
oo?
frûmeb0Tdn=o"
toid
yldas/4-mpu'" Snc= iaam
<body
</headS
</tiHe yooamu by
Viduo Html <HHe
<head
<htm
Syntax-/Cod1
JtAGE
DATE
Acoebsite bak mone appe oliey tan yust
phin on unirspirn piecs o text
Css deinitdly acts as a backboru o ta

DIEFE RENCE BETWEEN HIML CSS


HTM
Hyper tet Mahkrp languoge
E is thu spansible fox duinng the stackao Oun
page

mgauzng and sbiching th conlent


dalinta huadigs,
dists ytablesms and
punagaghs,
othn
inaga gdinks
Css.
Coscading Style shat

enhan c the
Applyng styles to Ha tt ML elements.
ss cantals uisual propeutes such ad aos,onts,
manginS, poadling , bordus;buckgounds and mere.
Oaito CS S ca to choge he ont siz
pananaph (Peemn s) oltio
all
speaic <aiv> cnlaunen.

AN SOER

-font-sizei l6pxj

G0ESTION -NTH

Explaun the con copt o CSS seleckors and


poud an example a closs seleckoo.

ANSOER -

selectoys ahu pattenns taat doti


css stleo
telreh tTML abmnts shald be
y set

you to tanget Gpeaii elanirs


" y alloa
page
Som Comm On css Selectes cUL
:blue color
25pA ontsie
haco
Css
</hdml
xt</e> Somi4ext"> class= <e
hucd>This
ais <h.class
="
</He tos see class <HHHe>
<htm>
Ex
tSNTAX
3ECGCTOR CLASS E
OE (LXAMP
saecdo Onivensal
selecton ninatos
Cam6inat
soec Atibtde
selector class +
backg2ound-cadori
yela}
ANcOER
applie
., hen
color
backound the anges
hat tohighlig
htFext" ncmd" class css Coeadea
60ESTION-3MH
PAGE
// )DATE
Describe the CSS box model and its components. How does it
affect element
layout?

The CSS bOx model is a fundamental concept in web design and


layout. It defines the structure of every HTML element on a web page
as a rectangular box. The boX model consists of several components
that determine how elements are rendered and how they affect the
layout of a web page. The key components of the CSS box model are
as followS:

1. Content: This is the actual content of the HTML element, such as


text, images, or other media. It is surrounded by the other boX model
components.
2. Padding: Padding is the space between the content and the
element's border. It provides internal spacing and can be adjusted
using the `padding' property in CSS.
3. Border: The border is a line that surrounds the padding and content.
It can have a width, style, and color defined using the border'
property.
4. Margin: The margin is the space outside the border. It separates the
element from other elements on the page and is controlled using the
'margin property.
These components affect the layout of elements in the following
ways:

Width and Height: The total width and height of an element are
calculated by adding the content width/height, padding, border, and
margin. For example, if you set an element's width to 200px, and it
has 10px of padding, a 2px border, and 20px of margin, the actual
space it occupies on the web page will be 232px (200px +10px +
2px + 20px).
Spacing: The padding and margin control the spacing between the
element's content, other elements, and the element's border.
Padding creates space inside the element, while margin creates
space outside the element.
Border: The border can be used to visually separate elements or
provide a visual outline to the element.

Understanding the CSS box model is crucial for web layout and
design because it allows you tocontrol how elements are positioned,
sized, and spaced on a web page. Properly adjusting padding and
margins can help create aesthetically pleasing and well-structured
layouts.
How can you center-align a block-level element
horizontally using CSS?
Provide a CSS rule for this.

To center-align a block-level element horizontally using CSS, you can


use the following CSS rule:

CSS OCopy code

. Center {

margin: 0 auto;

Here's what this rule does:

1. The 'margin` property is set with two values: 0° for the top and
bottom margins, and `auto' for the left and right margins.
2. Setting the left and right margins to "auto` will horizontally center
align the block-level element within its parent container.
Write CSS code to create a hover effect that changes the
background color of
a button when the cursor hovers over it.

SYoucan create a hover effect fora button by using CSS. Here's an


example of CSS code that changes the background color of a button
when the cursor hovers over it:

CSs O Copy code

/* Define the default styles for the button */


button {
background- color: #3498db; /* Default background color */
color: #fff; /* Default text color*/
padding: 10px 20px; /* Adjust padding as needed */
border: none; /* Remove the border for a cleaner look */
cuISOI: pointer; /* Changethe cuISOI to a pointer when hovering */

/* Create a hover effect by changing the background color on hover /


button:hover (

backqround - Color: #e74c3c: /* New background color on hover /


Write CSS code to change the text color of all <h2>
headings to blue.

You can change the text color of all '<h2> headings to blue using the
following CSS code:

CSs OCopy code

h2
color: blue:

This CSS rule selects all '<h2> elements in your HTML document
and sets their text color to blue. You can include this CSS code within
a '<style> tag in the '<head> section of your HTML document, or
youcan link to an external CSS file that contains this rule.
Explain the purpose of CSS pseudo-classes and provide an
example of using
the :hover pseudo-class.

CSS pseudo-classes are used to define special states or behaviors


for HTML elements. They allow you to apply styles to elements based
on conditions that cannot be targeted with simple element selectors.
Pseudo-classes play a crucial role in creating interactive and
dynamic user interfaces. They are preceded by a colon () in CSS.

The:hover' pseudo-class is one of the most commonly used


pseudo-classes. It allows you to define styles for an element when a
user hovers their cursor over it. This is particularly useful for creating
hover effects to provide visual feedback to users when interacting
with elements like links or buttons.

Here's an example of using the ':hover' pseudo-class to change the


background color of a button when the cursor hovers over it:
CSS Copy code

/* Define the default styles for the button */


button (
backgro und -color: #3498db; /* Default background color */
color: #fff; /* Default text color */
padding: 10px 20px; /* Adjust padding as needed */
border: none; /* Remove the border for a cleaner look */
cUISOI: pointer; /* Change the cursor to a pointer "/

/* Create a hover effect by changing the background color on hover */


button :hover (
background - color : #e74c3c; /* New background color on hover */

You might also like