Exp : 1 & 2 : Working with HTML and CSS

Code for Reference Overview of HTML and CSS Tags, Elements, Attributes, and Content, Displaying Text in HTML, Displaying Images and Linking Documents in HTML Index.html

Welcome to 20480 PRACTICE

HTML PRACTICE

Elements consist of content bookended by a start tag and an end tag.

An Introduction to HTML

In this module, we look at the history of HTML and CSS.

In the Beginning

WorldWideWeb was created by Sir Tim Berners-Lee at CERN.

• Notepad
• Textmate
• Notepad
• Textmate
• Visual Studio
• Visual Studio

1. Notepad
2. Textmate
• Notepad
• Textmate
• Visual Studio
3. Visual Studio

The dl, dd, and dt elements

These three elements are used to create a description list:

Coffee

Black hot drink

Milk

White cold drink

go to visual code website-separate page go to visual code website-self page

To create a link that opens in the user's email program (to let them send a new email), use mailto: inside the href attribute:

contact@contoso.com

Tables

ID	NAME	EMAIL	CITY
101	Mukhtar	mukhtar@gmail.com	Mumbai
101	Mukhtar	mukhtar@gmail.com	Mumbai
101	Mukhtar	mukhtar@gmail.com	Mumbai
101	Mukhtar	mukhtar@gmail.com	Mumbai
101	Mukhtar	mukhtar@gmail.com	Mumbai

Gathering User Input by Using Forms in HTML Form.html

Create an Account

    
    

        

            
                
        
Register yourself here
        
        First Name
        
        
        Last Name
        
        
        Email
        
        
        Select Gender
        Male
        Female

        Select Country
        
            ----select country-----
            INDIA
            USA
            UK
        

        Password
        

        
        About yourself
        
        
        
        

Attaching Scripts to an HTML Page Addjs.html Process.js alert("hello bro"); Overview of CSS htmlwithCSS.html

Koenig solutions pvt. ltd

Koenig

Google

Microsoft

Koenig

Google

Microsoft

Koenig Solutions

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias officia fuga iste! Cupiditate provident odit natus recusandae dolores, adipisci dolorum debitis temporibus eum facilis nulla? Vero illo blanditiis ea laborum.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita ipsum sit, repudiandae placeat, nobis aut, reiciendis quas totam consectetur eaque minima nesciunt! Unde maiores iusto debitis a perspiciatis optio libero!

---

Book Flight Ticket
Book Train Ticket Style.css /* Element Selector */ h1{ color: brown; text-align: center; text-decoration: underline; } /* id selector */ #head1{ color: blue; } #head2{ color: green; } #head3{ color: olive; } /* class selector */ .head1{ color: blue; } .head2{ color: green; } .head3{ color: coral; } /* Multiple Element Selector */ h1, p, div{ color: blueviolet; } /* Wild card Selector */ *{ color: cornflowerblue; } /* Attribute Selector */ a[target="_blank"]{ color: blue; } a[target="_self"]{ color: crimson; } body{ color: cadetblue !important; } Module 2: Creating and Styling HTML Creating an HTML5 Page & Styling an HTML5 Page Content Structure in HTML5 Html5_page.html

Home

INDIA

My Best Recipes

My Favorite Recipes

// article tag is self-contained and independent tag

Beans on Toast

Ingredients

• Beans
• Breads

Methods

1. Toast Breads
2. Heat beans
3. put beans on toast

A wonderful evening with mountain

Fig.1 - Trulli, Puglia, Italy.

Last updated on Sept 12 2021
last updated on January 14 2023

Typographic Properties CSS defines another five text-related properties that cover typographic properties such as line height and kerning, as well as more obvious features such as alignment and underlining. These properties are: • The letter-spacing property, which enables you to increase or decrease the space between characters in a block of text. You can set the font-size value to an absolute value in pixels or points, or to a relative value in percentages or in ems. The following code shows some examples: letter-spacing: 2em; letter-spacing: -3px; • The line-height property, which enables you to increase or decrease the space between lines of text in a block of text. You can set this value to an absolute value in pixels or points, or a value relative to the current font-size by using either a percentage or a positive number. The following code shows some examples: line-height: 16px; line-height: normal; /* This is the default */ line-height: 1.2; line-height: 120%; • The text-align property enables you to set how the text in the selected blocks is aligned. For example, left, right, or justify. The following code shows an example: text-align : left; • The text-decoration property, which enables you to set whether text in selected elements will be decorated with a line, and if so, where. Possible values are none (the default), underline, overline, and ine-through. The following code shows an example: text-decoration: underline; • The text-transform property, which enables you to set the capitalization of text in selected blocks. Possible values are none (the default), capitalize, uppercase, and lowercase. The following code shows an example: text-transform: capitalize; cssBoxModel.html

INDIA

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab veritatis nobis accusamus explicabo dolor eum ad doloremque pariatur magnam sit sint voluptatibus sed aliquam harum alias aspernatur beatae incidunt hic possimus, exercitationem necessitatibus sequi cum. Ut recusandae illum sed iste vero accusantium beatae necessitatibus quia quos qui eaque, delectus non distinctio aliquam odit soluta nesciunt ipsam optio molestias perferendis placeat perspiciatis quis temporibus inventore? Corrupti nostrum iure deserunt dolor voluptatum reprehenderit unde magni, blanditiis, illum cum quod dicta qui tempora vero reiciendis quam, dolorum excepturi harum inventore soluta quia. Ipsum, quo. Debitis exercitationem quos unde error modi nisi, adipisci saepe, explicabo sequi quas officiis sit cupiditate odit repellat aperiam iusto molestiae veritatis laudantium atque voluptatibus consectetur? At quasi corrupti obcaecati ab temporibus vero maiores et unde repudiandae. Cum, velit architecto. Quidem rerum consequuntur corrupti ratione enim autem perferendis fuga sint aliquid aspernatur veritatis ab magnam iste laboriosam a eos accusamus est ut dolorum, error voluptatum! In placeat beatae ab quas totam tempora officia voluptatem earum dolorem, id, quae vitae culpa tempore repellat. Tempora reiciendis dolores accusamus mollitia eaque libero impedit exercitationem, illo magnam enim expedita, nobis perspiciatis porro consequuntur delectus hic atque iste, dolor facere natus quisquam sint ea. Consequuntur dolor assumenda nulla mollitia doloremque. Sunt officiis blanditiis distinctio quibusdam eos veritatis, est delectus neque ad doloribus deserunt dicta libero saepe debitis molestiae quaerat quod ratione sequi esse ipsa laudantium. Quas nisi corporis veniam provident inventore doloribus tempore odit quasi in? Mollitia molestias nemo aliquam ab magnam alias error quos excepturi cupiditate iusto aperiam voluptates corporis, numquam neque laudantium, consequatur repellat. Recusandae minus non velit est porro hic in sapiente vel nulla ducimus, consequuntur, temporibus quae. Id veritatis quaerat quod, possimus sapiente consequatur officia veniam? Eligendi facilis repellat aut illo vero corporis, ea alias enim distinctio. Id reiciendis illo molestias exercitationem adipisci quia, architecto nihil quidem ad possimus earum veniam accusantium velit dolor voluptates nisi impedit inventore expedita sint maxime. Totam aliquid blanditiis impedit ea doloremque voluptatum dolores, dicta ut quae fugit error dignissimos ullam eaque explicabo expedita, animi, aut accusamus facilis rerum. Reprehenderit eaque sequi vot porro culpa quia excepturi dolore officiis dolorem minus consequatur ipsam obcaecati debitis aspernatur quo repudiandae in unde asperiores labore fuga deserunt quas! Doloribus veritatis velit, deserunt ratione quasi culpa et ullam, incidunt ducimus, odio ipsam id vel. Delectus optio odit sed aliquam. Unde provident repudiandae nam, iste minima commodi atque cum nostrum cupiditate explicabo enim necessitatibus ut possimus architecto numquam odit, obcaecati dignissimos ex illo aliquid. In possimus deserunt harum culpa saepe, consectetur vel nihil distinctio vero eos laudantium error inventore iste repellat ad hic vitae rem qui voluptates voluptate, optio neque. Quas recusandae aliquid rerum explicabo accusamus eos beatae voluptas. Voluptates asperiores et earum ea iste doloremque aliquid incidunt, adipisci beatae quisquam doloribus labore illum magnam laborum, molestiae delectus aspernatur quos ipsa. Dolore debitis assumenda laudantium vitae quos dolorem dolor numquam quam, sapiente itaque quae eum ullam, inventore nostrum earum dolores unde? Cupiditate eaque voluptates blanditiis repellat voluptate exercitationem odit delectus et. Voluptatem tenetur facere illo aperiam, perferendis molestias eos ratione maxime voluptatum. Quos alias debitis nisi quidem dicta doloribus fugit a excepturi dolore, magnam placeat ad dolorum accusamus dolorem doloremque, sint molestias illum aut, culpa sapiente. Iusto quam ipsam reiciendis eveniet nesciunt voluptatum perspiciatis! Consequuntur sapiente hic sed fuga nesciunt accusamus doloribus. Porro officia totam aliquid, aspernatur officiis quos dolor blanditiis, dicta enim recusandae tenetur autem consectetur corrupti eos sapiente nihil laborum laudantium repellendus esse ab. Illo excepturi corporis recusandae sapiente sunt est! Optio dolorem libero numquam facere! Quam architecto vero ad ipsa natus autem repudiandae dolorum necessitatibus totam repellat, maxime odio placeat rerum temporibus deserunt molestias aliquid error minima ex consectetur harum enim alias modi assumenda. Quibusdam eaque exercitationem earum temporibus obcaecati! In sapiente facere aperiam ea nihil! Sequi maiores, quis saepe repellendus rerum expedita deleniti harum quibusdam dicta accusamus ducimus! Molestias optio numquam inventore iusto minus iste deserunt id ex, recusandae, harum ipsum a exercitationem velit sint aperiam magni? Ex fugit fuga in architecto tempora natus, aperiam eius nisi distinctio, aut minima asperiores laudantium odit. Voluptas perspiciatis incidunt mollitia tempore repellendus deserunt consequatur impedit nisi? Reiciendis accusamus, aliquid repellendus temporibus tempora excepturi earum doloremque maiores sapiente. Quisquam minus iusto incidunt fugit ut cumque aperiam quas in sed, ullam, dolor laboriosam accusamus, ipsum labore quam quasi aliquam. Quia voluptates et laborum similique quos nobis totam dolores ab sint excepturi?

The background-position Property

The background-position Property

Here, the background image will be positioned centered at top.

background-origin: padding-box (default): background-origin: border-box: background-origin: content-box:

background-origin: padding-box (default):

Hello World

The background image starts from the upper left corner of the padding edge.

background-origin: border-box:

Hello World

The background image starts from the upper left corner of the border.

background-origin: content-box:

Hello World

The background image starts from the upper left corner of the content.

CSS background-repeat Property

The background-repeat Property

Here, the background image is repeated only vertically.

The

element, which indicates that its contents should be treated as a single heading. This element can contain header tags

to

.

My Recipes

Great to eat, easy to make

The element, which enables you to define an unambiguous time, duration, or period that is both human and machine readable. The datetime attribute contains the ISO standard representation of the contents of an element. Today
9am today in New York
4h
2012

Open from 10:00 to 21:00 every weekday.

The element, which identifies that its contents should be treated as text to be marked or highlighted for reference purposes.

This text should be noted for future use rather than emphasized.

The element, which identifies that its contents should be treated as side comments, such as small print or author attributions.

Heat your beans for five minutes. Or until they are hot enough for you.