*): Creates a numbered list where the order matters. * Unordered List (“
°): Creates a bulleted list where the order doesn't matter ¢ Definition List ("~): Pairs terms with their descriptions, often used for glossaries or lists of terms and definitions. be) CamScanner5:00 PM 66.8KB/s d wrattll CE)! The position Property The position property specifies the type of positioning method used for an element. There are five different position values: * Static e relative * fixed e absolute * sticky Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value. position: static; HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties. Anelement with position: static; isnot positione’ positione This
elementhas position: f = @ a SJ CamScanner5:00 PM 28.1KB/s d) rat! Cs position: static; HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties. Anelement with position: static; isnot positioned in any special way; it is always positioned according to the normal flow of the page: his
element has position: static; Here is the CSS that is used: Example div.static { position: static; border: 3px solid #73AD21; Try it Yourself » | This
element has position: f naciti a @ element has position: relative; Here is the CSS that is used: Example div.relative { position: relative; left: 30px; border: 3px solid #73AD21; Try it Yourself » | This
element has position: f a @ element has position: f a (OC) <4 CamScanner5:00 PM 0.0KB/s 0° vat! COS) I position: absolute; Anelement with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Note: Absolute positioned elements are removed from the normal flow, and can overlap elements. Here is a simple example: his
element has position: relative; his
element h position: absolute; Here is the CSS that is used: Exampo——_——_—_ a @ <4 SJ CamScanner5:00 PM 0.4KB/s 0d al) CD Here is the CSS that is used: Example div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21; Try it Yourself » position: sticky; Anelemet this
elementhas position: f positione a @ 4 CamScanner5:00 PM 0.0KB/s 0° etl! CSD position: sticky; Anelement with position: sticky; is positioned based on the user's scroll position. A sticky element toggles between relative and fixed , depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). Try to scroll inside this frame to understand how sticky positioning works. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset Note: Internet Explorer does not support sticky positioning. Safari requires a -webkit- prefix (see example below). You must also specify at least one of top, right, bottom or left for sticky positioning to work. In this ed This
elementhas position: f a @ < SJ CamScanner5:00 PM 2.1KB/s 0) al! CD one of top, right, bottom or left for sticky positioning to work. In this example, the sticky element sticks to the top of the page ( top: ©), when you reach its scroll position. Example div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: green; border: 2px solid #4CAF50; } Try it Yourself » Positioning Text In an Image How to pq2iti i | This
elementhas position: f a @ < CamScanner5:08 PM 0.0KB/s 0° B “ul GD: — ChatGPT : X Vviooos Chast < A chatgpt.com orl w Qs What is Meta Tag in HTML? Write HTML meta tags code to solve following 1) To make your webpage Responsive. 2) Refresh document every 40seconds 3) Set an expiration date Stop the page from being listed. A Meta tag in HTML is an element used within the ‘* section of an HTML document. It provides metadata about the webpage, such as descriptions, keywords, author of the document, and more. These tags help search engines understand the content of the page, control the behavior of web browsers, and can also be used to make the page responsive or automatically refresh. Here is how you can achieve the specific requirements: 1) To Make Your Webpage Responsive To ensure that your webpage is responsive, you can use the following meta tag. This instructs the browser to control the page's dimensions and scaling 2) Refresh Document Every 40 Seconds To automatically refresh the webpage every 40 seconds, use the following meta tag: BT] 3) Set an Expiration Date and Stop the Page from Being Listed To set an expiration date for your page (after which it is considered stale) and to stop the page from being listed by search engines, you can use the following tags: + Expiration Date: * Stop Page from Being Listed (Noindex): eB © Your Webpage Title ea SOc, elm e ROT aii eg This code snippet will ensure your webpage is responsive, refreshes every 40 seconds, expires on the specified date, and is not indexed by search engines CamScanner5:11PM 6.0KB/s 0° ee Create an HTML form to submit student data for Admission Upload pdf copy of mark sheet, passport size photo and address proof. ) create an HTML form for submitting student data for admission, including the upload a PDF copy of the mark sheet, passport-size photo, and address proof, you can use e following code: See Bes Buda) beatae eS SCM ce la Sed Date of Birth:< str S ce Te BS ET eC eee Besa Sst ths = sa



CamScanner5:11PM 10.9KB/s 0 Boul Create an HTML form to submit student data for Admission Upload pdf copy of mark sheet, passport size photo and address proof. ) create an HTML form for submitting student data for admission, including the upload ‘a PDF copy of the mark sheet, passport-size photo, and address proof, you can use e following code: mission Form SC Al eg >Full Name: < = >

>Date of Birth:
e = >

ca lal Lae LL 2 ERC ae aed cage owe 2 Oba TT M0-] 5) Dens) ed >

ca Cela TL

CamScanner5:11PM 12.4KB/s d

>Date of Birth:
{= \e= } >

>Gender :
ra EDC ha we Tee >Female >Other

ca PSE Sead ed = “ juired>

>Phone Number ;
- me ; ed>

>Address:
>Upload PDF Mark Sheet :
>Upload Passport Size Photo:
>Upload Address Proof:
5:11PM 17.1KB/s dY Bul! G2: >

>

>

>

>

IDF Mark Sheet :
ar yeh } reese) nse) ed rt Size Photo:
e= = : \>

id Address Proof:
5:13 PM 0.0KB/s 0 ou x wv es HTMLM.. chatgpt.com See, Ulny TONS are GHUWCU; WIE tie passpurt pruw varraceeprany wage format, and the address proof can accept PDF, JPG, JPEG, or PNG files ‘his form collects the student's personal details, and necessary documents and allo hem to submit their application for admission. Write an HTML code to take birth date between 01-01-2020 to 31- 12-2020 ‘o create an HTML form that allows users to input a birth date between January 1, 2 ind December 31, 2020, you can use the ‘min* and ‘max* attributes of the ‘ ‘lement of type “date *. Here's how you can do it: Study Birth Date Input Form STAs [eed Bs olele ig Enter Your Birth Date Birth Date:
Saale ane ST An ha Bed5:14PM 0.0KB/s 0° Bal GS) x Vv 25 HTMLM.. chatgpt.com write an HI ML code to take birtn Gate petween UI-U I-ZUZU to 31- 12-2020. ML form that allows users to input a birth date between January 1, 2020, $1, 2020, you can use the ‘min* and ‘max’ attributes of the ** ‘date*. Here's how you can do it: >

e"*: The input field is of type ‘date’, which provides a date picker in tat support it. )-01-01"": The earliest date that can be selected is January 1, 2020. )-12-31"": The latest date that can be selected is December 31, 2020. x @ < CamScanner5:16 PM 0.0KB/s d° Bou x Vv 93 HTMLM. chatgpt.com Write an HTML & CSS code to create Horizontal and Vertical Menu ere’s how you can create both a horizontal and vertical menu using HTML and CSS. . Horizontal Menu Sinan Sie leed Ste] Horizontal and Vertical Menu Boal Le BS To] eg Horizontal Menu mrt - .
Home
PIB ESS) >Services PS Gere) f >About
Bulbs ie ete SMCS ab be = pS Sab ESS) >Home
About
Contact
BIA tele i)5:16 PM 1.2KB/s 0° = x vy o= HTML M... ra oO chatgpt.com Pa bere] >About
1. Vertical Menu me = >
2. Services
PIB Ets] >About >Contact Explanation: Horizontal Menu: e *.horizontal-menu’: This class is applied to the unordered list (*
*), making the list items (*
• *) appear in a row. The “float: left; * rule ensures that the list items align horizontally. * °li a°: This selector styles the links within the list items, making them block-level elements that fill the list items and allowing padding and background colors to be applied effectively. * *:hover ‘: Changes the background color when the user hovers over a menu item Vertical Menu: * *.vertical-menu": This class is applied to another unordered list, making the list items stack vertically. * ‘border-bottom’: Adds a dividing line between each menu item * ‘width: 200px; °: Sets the width of the vertical menu * *:hover ‘: Similar to the horizontal menu, changes the background color on hover. Both menus can be customized further by changing colors, fonts, padding, and other properties be) CamScanner5:19PM 4.7KB/s d’ © “all G2) x Vv o— HIMLM... < - chatgpt.com What is CSS Box Model? Write CSS code to implement following output. 1) Make an ordered list with red border, padding and font size 20. 2) Use flower.jpg as Background and repeat it. 3) Change background color of text box when focused. 4) Create a fixed position link at bottom with scrolling page. Give name of the link “#top”. 07 The CSS Box Model is a fundamental concept in web design that describes the rectangular boxes generated for elements in the document tree and how they interact with each other. It consists of four parts: 1. Content: The actual content of the element, where text and images appear. 2. Padding: The space between the content and the border. It clears an area around the content. 3. Border: The line that surrounds the padding (if any) and content. 4. Margin: The space outside the border, which separates the element from its neighboring elements. Here's the code to implement the requested output: 1) Make an Ordered List with Red Border, Padding, and Font Size 20 CamScanner5:19 PM 3.2KB/s d’ © xX v9 HTIMLM. chatgpt.com Balad purer Bola Bae baal os 0b o) eg solid red; } B73 9) 2 Ag

  Ordered List with Red Border, Padding, and Font Size 20px

  Pep ied PRE Ge) Mb I 2 eee p36 2 Ga- eee ee pee oe eee

Background Image Repeating

This page uses flower.jpg as a repeating background image.

Scroall down to see the fixed link at th >#top SA Leth ed Bodine Be Fynlanation: CamScanner5:22 PM 0.2KB/s d) © atl 2 Ww Menuy Q QO Login schools i ee Gass) OTN toed a taal SQL CSS Pseudo-classes What are Pseudo-classes? A pseudo-class is used to define a special state of an element. For example, it can be used to: ¢ Style an element when a user mouses over it ¢ Style visited and unvisited links differently * Style an element when it gets focus Mouse Over Me Click Me To Get Focus CamScanner5:22 PM 0.5KB/s d’ © wall) CL: 3 w Menuy QO Login schools = HTML CSS OPW Old eal SQL syntax The syntax of pseudo-classes: selector:pseudo-class { property: value; Anchor Pseudo-classes Links can be displayed in different ways: Example /* unvisited link */ a:link { color: #FFO000; /* visited Link x/ = (OC) <4 CamScanner5:22 PM 0.0KB/s 0’ © wastl! CL): 3 Ww Menuy QO Login schools = ee CSS OPW Olde SQL Pseudo-classes and HTML Classes Pseudo-classes can be combined with HTML classes: When you hover over the link in the example, it will change color: Example a.highlight:hover { color: #ff0000; } Try it Yourself » Hover on