Assignment for html css. Practical work on HTML

1.1. Create on local Xampp server in the htdocs folder there is a test folder test, in it there are css, images and pages folders, as well as an empty main page index.html of our test site. Then, in the pages folder, create an empty web page, page_1.html, and in the css folder, two empty css files: styles_1.css and styles_2.css. Do not delete the test folder in the future; we will perform all exercises in it. In html documents, do not forget to specify the utf-8 encoding and the page title "title". For quick access To home page. , create a bookmark for it in your browser. The address path to the page should look like

http://localhost/test/index.html

Show solution. Solution to problem No. 1.1

1.2.

Set the paragraph width to 300px. Use red and blue colors.

Show solution. Condition of task No. 1.2 CSS tasks , create a bookmark for it in your browser. The address path to the page should look like

Solution to problem No. 1.2 1.3.

Use the condition of the second problem, but place the style sheet in

external file , create a bookmark for it in your browser. The address path to the page should look like

Solution to problem No. 1.2 1.3.

styles_1.css . To connect an external style sheet, use the "link" service element.

The paragraph text should be in red. , create a bookmark for it in your browser. The address path to the page should look like

Solution to problem No. 1.2 1.3.

But no, because... The content of the "span" element should be blue.

Solution to problem No. 1.3 1.4. Use the condition of the third task, but connect the external style sheet using the @import property, placing the rule in the "style" service element. , create a bookmark for it in your browser. The address path to the page should look like

Solution to problem No. 1.4
Use the second problem's condition, but place the paragraph rule in the external file styles_1.css and the rule for the "span" element in the external file styles_2.css . Connect one of these files using the "link" service element, and the second using the @import property, placing the rule in the "style" service element. In all four tasks the result should be the same!

Solution to problem No. 1.5

1.6.

#p_1( color: red; width: 300px; ) .s_1( color: blue; ) span( color: green; )

Solution to problem No. 1.6

1.7. , create a bookmark for it in your browser. The address path to the page should look like

Below is the code of the html page, as well as the appearance of the page when displayed by a browser. An external style sheet is connected to the page, the code of which needs to be restored.

It is allowed to use only contextual, child and adjacent selectors in CSS rules.
Orange "em"

The first red line of the paragraph.

Blue "span".

Page code for task No. 1.7

Required page appearance in task No. 1.7 , create a bookmark for it in your browser. The address path to the page should look like

1.8.

It is allowed to use only contextual, child and adjacent selectors in CSS rules.
Below is the code of the html page, as well as the appearance of the page when displayed by a browser. An external style sheet is connected to the page, the code of which needs to be restored.

Use pseudo-class and pseudo-element selectors :hover , :visited , ::first-letter . For a paragraph, use a regular element selector.

Use a pseudo class

When you hover over me, I turn orange.

I've already been visited.

Page code for task No. 1.8 , create a bookmark for it in your browser. The address path to the page should look like

Required page appearance in task No. 1.8

P( color: red; width: 300px; ) em:hover( color: orange; ) p::first-letter( color: blue; ) a:visited( color: green; )

Solution to problem No. 1.8

1.9. , create a bookmark for it in your browser. The address path to the page should look like

Which selector has more specificity: p em(...) or p.class(...), #m_d(...) or em.m_cl(...), div p#my_id span(... ) or div span#s_id(...), div>div.my_class p.red_color span:hover(...) or div p+div p.green_color span(...).

Which selector has more specificity: p em(...) or p.class(...), #m_d(...) or em.m_cl(...), div p#my_id span(... ) or div span#s_id(...), div>div.my_class p.red_color span:hover(...) or div p+div p.green_color span(...). We determine specificities and compare. p em(...) em.m_cl(...), because (1,0,0)>(0,1,1); div p#my_id span(...) div.my_class p.red_color span:hover(...) > div p+div p.green_color span(...), because (0,4,4)>(0,2,5).

Solution to problem No. 1.9

Required page appearance in task No. 2.1

P_1( width: 500px; background-color: yellow; word-spacing: 3px; letter-spacing: 1px; line-height: 1.1em; text-indent: 1%; ) #p_2( text-decoration: line-through ) .p_3( width: 500px; background-color: violet; word-spacing: 12px; letter-spacing: 2px; line-height: 1.6em; text-indent: 3%; text-align: right; ) #p_4( text -decoration: underline)

Solution to problem No. 2.1

2.2. , create a bookmark for it in your browser. The address path to the page should look like

Which selector has more specificity: p em(...) or p.class(...), #m_d(...) or em.m_cl(...), div p#my_id span(... ) or div span#s_id(...), div>div.my_class p.red_color span:hover(...) or div p+div p.green_color span(...). We determine specificities and compare. p em(...) em.m_cl(...), because (1,0,0)>(0,1,1); div p#my_id span(...) div.my_class p.red_color span:hover(...) > div p+div p.green_color span(...), because (0,4,4)>(0,2,5).

Which selector has more specificity: p em(...) or p.class(...), #m_d(...) or em.m_cl(...), div p#my_id span(... ) or div span#s_id(...), div>div.my_class p.red_color span:hover(...) or div p+div p.green_color span(...). We determine specificities and compare. p em(...) em.m_cl(...), because (1,0,0)>(0,1,1); div p#my_id span(...) div.my_class p.red_color span:hover(...) > div p+div p.green_color span(...), because (0,4,4)>(0,2,5).

Below is the code of the html page, as well as the appearance of the page when displayed by a browser. An external style sheet is connected to the page, the code of which needs to be restored.

Set the width (width) of paragraphs to 500px, background (background-color), respectively, set to yellow and purple (violet). For the first paragraph, use the font Arial, and for the second - Times New Roman. Set the font size in both paragraphs to 1em. Use the font-variant , font-weight , font-style properties where needed. Compare the result of formatting the text with the result of formatting in task 2.1.

Page code for task No. 2.2

Required page appearance in task No. 2.2

P_1( width: 500px; background-color: yellow; font-family: arial; font-size: 1em; ) #p_2( font-variant: small-caps; ) .p_3( width: 500px; background-color: violet; font-family: "times new novel"; font-size: 1em; font-weight: bold ) #p_4( font-style: italic; ) , create a bookmark for it in your browser. The address path to the page should look like

• Solution to problem No. 2.2

1. 2.3.
2. Below is the code of the html page, as well as the appearance of the page when displayed by a browser. An external style sheet is connected to the page, the code of which needs to be restored.

Set the width (width) of the lists to 500px, background (background-color), respectively, set to yellow and purple (violet).

Use the list-style-type and list-style-position properties where required. Compare the formatting results of both lists.

We use the decimal marker type.

We place markers outside the list.

2.4. , create a bookmark for it in your browser. The address path to the page should look like

Below is the code of the html page, as well as the appearance of the page when displayed by a browser. An external style sheet is connected to the page, the code of which needs to be restored.

Use the properties caption-side , border-collapse border-spacing , empty-cells . Compare the result of formatting both tables.	Table No. 1
Cell 1.1	Cell 1.2

Cell 2.1

Use the properties caption-side , border-collapse border-spacing , empty-cells . Compare the result of formatting both tables.	Table No. 1
	Cell 1.2

Cell 2.2

Table No. 2

Page code for task No. 2.4

Required page appearance in task No. 2.4

Table_1( caption-side: top; border-collapse: collapse; ) .table_2( caption-side: bottom; border-collapse: separate; border-spacing: 5px; empty-cells: hide; )

Solution to problem No. 2.4 , create a bookmark for it in your browser. The address path to the page should look like

§3. Setting the sizes, borders, paddings and margins of elements

3.1.

Below is the code of the html page, as well as the appearance of the page when displayed by a browser. An external style sheet is connected to the page, the code of which needs to be restored.

Set the width of the first paragraph to 400px, the second to 300px. Set the height of the first paragraph to 10vh, the second to 200px. In the second paragraph, set the minimum width limit to 400px and the maximum height limit to 100px.

Use the properties width , height , min-width , max-height . Note the end results of the width and magnitude of the second paragraph due to the constraints being applied.

The paragraph width is 400px, the height is 10% of the height of the browser window viewing area.

The paragraph width will be 400px, because... width is less than min-width, and height is 100px, because height exceeds max-height. Page code for task No. 3.1 Required page appearance in task No. 3.1 , create a bookmark for it in your browser. The address path to the page should look like

P_1( background-color: yellow; width: 400px; height: 10vh; ) .p_2( background-color: violet; min-width: 400px; max-height: 100px; width: 300px; height: 200px; )

Solution to problem No. 3.1

3.2.

3.3. , create a bookmark for it in your browser. The address path to the page should look like

In the condition of task 3.1, the code of the HTML page is presented, and below is the appearance of the page when displayed by a browser. An external style sheet is connected to the page, the code of which needs to be restored.

Take advantage of the results of problems 3.1 and 3.2 by adding additional properties to the style sheet that set the rounding of the corresponding corners of the first paragraph and the outer borders of the second paragraph: border-radius , border-bottom-right-radius , border-bottom-left-radius , outline , outline- offset. Set the border rounding to 1em and the bottom corners to 2em. Set the distance between the inner and outer borders to 2px. Set the outer border width to 4px.

Required page appearance in task No. 3.3

P_1( background-color: yellow; width: 400px; height: 10vh; border: solid red 4px; border-top: dotted blue; border-bottom: dashed blue; border-radius: 1em; border-bottom-right-radius: 2em; border-bottom-left-radius: 2em; ) .p_2( background-color: violet; min-width: 400px; max-height: 100px; width: 300px; height: 200px; border: solid green 4px; outline: solid blue 4px; outline-offset: 2px ) , create a bookmark for it in your browser. The address path to the page should look like

Solution to problem No. 3.3

3.4.

In the condition of task 3.1, the code of the HTML page is presented, and below is the appearance of the page when displayed by a browser. An external style sheet is connected to the page, the code of which needs to be restored.

Take advantage of the results of tasks 3.1, 3.2 and 3.3 by adding additional properties to the style sheet that set the internal and external indents of paragraphs: padding, padding-left, margin, margin-top. Set the padding in both paragraphs to 0.5em, and then redefine their padding to 0.8em. Set the margin to 30px, but in the second paragraph, redefine the top margin to 50px. Compare the results of all four problems.

4.1. , create a bookmark for it in your browser. The address path to the page should look like

Below is the code of the html page, as well as the appearance of the page when displayed by a browser. An external style sheet is connected to the page, the code of which needs to be restored.

Copy the image of the briefcase to the images folder, which is located in the test folder we created earlier on the local server (if you deleted it, then look at the condition of task No. 1.1 at the beginning of the problem book and create everything again). The first paragraph text should be red, the background should be yellow, and the paragraph width should be 300px.

The width of the second paragraph should be 300px, set the background to purple. Also add a background image, which should not be repeated, the dimensions should be 20% of the width and 40% of the height of the paragraph, the starting position should be determined by the coordinates x =15px and y =15px . Select only the content area of ​​the paragraph for the background.

The text of this paragraph should be red and the background yellow.

The paragraph width should be 300px.

The paragraph width should be 300px, the background should be purple.

The image should not be repeated, the dimensions should be 20% of the width and 40% of the height of the paragraph. The starting position should be determined by the coordinates x=15px and y=15px. Select only the content area of ​​the paragraph for the background. , create a bookmark for it in your browser. The address path to the page should look like

Page code for task No. 4.1

The paragraph width should be 300px and its height 150px.

The background should be a radial gradient from green to white. The gradient ellipse should have radii of 250px and 280px, and the center should be located at the point with coordinates x=100px and y=180px.

Page code for task No. 4.2

Required page appearance in task No. 4.2

Background_1( color: black; background-image: linear-gradient(90deg, #ff0000, #ffffff); ) .background_2( background: radial-gradient(250px 280px at 100px 180px, #00ff00, #ffffff); ) .border_1( padding: 15px; width: 300px; border: solid 3px blue);

Solution to problem No. 4.2

4.3.

Below is the code for the html page, as well as the code for the external style sheet styles_1.css. Type them into Notepad++ and experiment by changing the values ​​of the animation properties.

HTML page code for task No. 4.3

Background_1( padding: 0px; width: 450px; height: 100px; border: solid 3px red; animation-name: example_1; animation-delay: 1s; animation-duration: 4s; animation-iteration-count: infinite; animation-direction: reverse; animation-timing-function: ease-in; animation-fill-mode: backwards; ) @keyframes example_1( 0%( background: #ff0000; height: 0px; ) 100% ( background: #0000ff; height: 200px; ) )

4.4.

Below is the code for the html page, as well as the code for the external style sheet styles_2.css. Type them into Notepad++ and experiment by changing the values ​​of the transit properties.

Creating Transition Effects

HTML page code for task No. 4.4

Background_1( padding: 10px; width: 100px; height: 100px; border: solid 3px blue; background-color: #ff0000; transition-property: width, background-color; transition-delay: 0.2s; transition-duration: 2s; transition-timing-function: ease-in; ) p:hover( cursor: pointer; background-color: #0000ff; width: 450px; )

External style sheet code for task No. 4.4

§5. Displaying elements in a document

5.1.

Below is the code for the html page, as well as the code for the external style sheet styles_2.css. Type them into Notepad++.

Div_0( padding: 10px; width: 200px; height: 200px; border: solid 3px orange; ) span:hover( cursor: pointer; display: block; ) .div_1( padding: 10px; width: 200px; height: 600px; border : solid 3px orange; background: linear-gradient(180deg, #0000ff, #ffffff); position: fixed; top: 250px ) .div_2( padding: 10px; width: 200px; border: solid 3px red; background: linear-gradient(90deg, #0000ff, #ffffff); position: absolute; top: 1100px;

External style sheet code for task No. 5.1

5.2. Below is the code of the html page, as well as the appearance of the page when displayed by a browser. An external style sheet is connected to the page, the code of which needs to be restored. Required characteristics , create a bookmark for it in your browser. The address path to the page should look like

For the third div, the width is 70px, height is 50px, gradient (45deg, #0000ff, #ffffff), padding is 5px, border width is 2px. Floats to the right. When hovering the cursor, it changes its transparency to 0.3.

Page code for task No. 5.2

Required page appearance in task No. 5.2

Div_1( padding: 15px; width: 300px; height: 400px; border: dashed 5px #00ff00; position: fixed; top: 30px; left: 35px; ) .div_3:hover( cursor: pointer; opacity: 0.3; ) .div_2 ( padding: 5px; width: 70px; height: 50px; border: solid 2px orange; background: radial-gradient(35px 35px at 10px 10px, #00ffff, #ffffff); float: left; ) .div_3( padding: 5px; width: 70px; height: 50px; dotted 2px red; background: linear-gradient(45deg, #0000ff, #ffffff);

Solution to problem No. 5.2 , create a bookmark for it in your browser. The address path to the page should look like

Page code for task No. 5.3

Required page appearance in task No. 5.3

Div_1( padding: 10px; width: 500px; height: 200px; border: dashed 5px #0000ff; background-color: yellow; position: absolute; top: 30px; left: 35px; ) .div_2( padding: 5px; width: 200px ; height: 100px; border: solid 2px blue; float: left; overflow: auto; )

Solution to problem No. 5.3

§6. @-rules. Inserting content. Print the document.

6.1. , create a bookmark for it in your browser. The address path to the page should look like

Below is the code of the html page, as well as the appearance of the page when displayed by a browser. An external style sheet is connected to the page, the code of which needs to be restored.

To create counters for the document body and the "h2" element, use the counter-reset property, and to insert counter values ​​using the content and counter-increment properties.

Introduction to HTML

What is HTML?

Browser display of a web document.

The concept of an HTML tag and its syntax.

Text formatting

Block and inline elements.

Breaking text into paragraphs. Applying headers.

Page code for task No. 6.1

Required page appearance in task No. 6.1

Body( counter-reset: parag_1; /* Create a counter for the body of the document */ ) h2( counter-reset: parag_2; /* Create a counter for the header "h2" */ ) /* Count all "h2" in the "body" element */ /* Insert content before each "h2": line+current counter value+line */ h2:before( counter-increment: parag_1 1; content: "§" counter(parag_1) "."; ) /* Count in element "h2" all "h3" */ /* Insert content before each "h3": current counter value parag_1+line+current counter value parag_2+line */ h3:before( counter-increment: parag_2 1; content: counter( parag_1) "." counter(parag_2) ".";

Solution to problem No. 6.1

§7. Practical layout of website elements in HTML and CSS

7.1.1 Download the tutorial code for the adaptive page framework, use the comments to study it, and then design it yourself.

7.2.1 The downloadable tutorial shows you how to create a page's side navigation to scroll up or down. There are no comments, but there is not much code, so understanding it won't be too difficult. Study the example and then make it your own.

7.2.2 Using the code from the previous example, create a "Back to Top" button at the bottom of the page. Remove side navigation. If you were unable to complete the task, look at the solution and then type the code yourself.

7.2.3 The downloadable tutorial shows how to create a "Back to Top" button on the side of the site that appears after scrolling the page by a specified number, for example, pixels. There are few comments, but there is not much code, so understanding it will not be difficult. Study the example and then make it your own.

7.3.1 Create a horizontal menu shown in the figure. Use a list to do this, placing links in list items. To make items appear as a line, convert them to inline elements. When you hover over menu items, they should change color to black. You can download the solution.

Convert the menu to vertical. To remove item numbers, use the corresponding property for list markers (see the CSS reference).

Required appearance of task menu No. 7.3.1

7.3.2 Study the following dropdown menu code and then type it yourself.

7.3.3 Study the following vertical drop-down multi-level menu code and then type it yourself.

7.3.4 Study the following code for a horizontal smooth drop-down menu, and then type it yourself.

Making up educational website No. 1

7.4.1 First, look through the pages of the educational site, download and carefully study its code, and then design the site yourself (no comments, just code).

Layout of educational website No. 2 7.5.1 To receive additional practice on website layout, download another training example of a website, use the comments to study its code, and then, using finished layout
Try to create a style sheet for high resolutions yourself. If you are working on a laptop, then to simulate higher resolutions, change the resolutions in media queries from 1366px, for example, to 1266px, so that the style sheet for large screen resolutions works. When creating a style sheet, use a sizing factor of 1.3. And then look at the display result in the browser and adjust.
Image sizes can be changed either in a graphic editor, or stretched using the appropriate CSS properties(see example and reference).

Only for subscribers

Only for subscribers

Only for subscribers

Only for subscribers

Only for subscribers

Only for subscribers

Practical work on HTML

Task No. 1.

Creating a Basic HTML File

1. Create a personal folder where you will save all the files of your site.

2. Right-click and select New - Blank File.

3. Enter the file name rasp.html.

4. Right-click “Open with” - “Mousepad”

5. Type a simple html document:

HTML tutorial file

Class schedule for Wednesday.

6. Save the document and close the editor.

7. Open the rasp.html document double click mouse and check the result.

Task No. 2.

Controlling the placement of text on the screen

1. Follow step No. 4 from the previous task, for the rasp.html file

2. Make changes to the rasp.html file, placing the wordsSchedule, classes, for Wednesday on different lines.

Example:

Schedule

classes

on Wednesday.

Don't be surprised that the appearance of your Web page hasn't changed.

Task No. 3.

Controlling text placement on screen 2

1. Follow step No. 4 from the first task, for the rasp.html file

2. Make changes to the rasp.html file:

Example:

Schedule

classes

on Wednesday.

3. Save the text with changes made in the rasp.html file.

4. Open the rasp.html document by double-clicking and check the result.

The appearance of the lines should change. Why does the text change?

Task No. 4.

Text formatting

Line feed tag
separates a line from subsequent text or graphics.

Paragraph tag

also separates the line, but also adds an empty line, which visually

highlights a paragraph.

HTML tutorial file

Schedule

classes

For Wednesday.

3. Save the text with your changes in the rasp.html file.

4. Open the rasp.html document by double-clicking and check the result.

Task No. 5.

Text formatting

1. Make changes to the RASP.HTML file

HTML tutorial file

Schedule

classes

on Wednesday.

3. Save the text with your changes in the rasp.html file.

4. Open the rasp.html document by double-clicking and check the result.

5. Answer the question: what tags are used to set underlined, italic, and bold fonts?

Task No. 6.

Set the character sizes of a Web page

There are two ways to control the size of text displayed by the browser:

use of heading styles,

Set the font size of the main document or the current font size.

Six title tags are used: from

before

(the tag is double, i.e. it requires closing).

Each tag has a specific style assigned to it by the browser settings.

1. Make changes to the RASP.HTML file

HTML tutorial file

Timetable of classes

on Wednesday.

3. Save the text with your changes in the rasp.html file.

4. Open the rasp.html document by double-clicking and check the result.

5. Replace the h1 tag with h2-h6, and see how the title size changes.

Task No. 7.

Set the current font size

Font tag allows you to set the size of the current font in individual places of the text in

range from 1 to 7.

HTML tutorial file

Timetable of classes

on Wednesday.

3. Save the text with your changes in the rasp.html file.

4. Open the rasp.html document by double-clicking and check the result.

5. Replace the font size with others, and see how the text size changes.

Task No. 8.

Setting the font color

Tag provides the ability to control typeface, color and text size.

To change the font color you can use it in a tag COLOR attribute=”X”. Instead of

“X” you must substitute the English name of the color in quotation marks (“ ”), or its hexadecimal

meaning. When specifying a color as a hexadecimal number, you must represent that color

decomposed into three components: red (R – Red), green (G – Green), blue (B – blue),

each of which has a value from 00 to FF. In this case we are dealing with the so-called

RGB format.

Examples of writing text in RGB format are shown in Table 1:

1
. Make changes to the RASP.HTML file

HTML tutorial file

Schedule

Classes for Wednesday.

3. Save the text with your changes in the rasp.html file.

4. Open the rasp.html document by double-clicking and check the result.

5. Change the color to another one and see the result of the font tag.

Task No. 9.

Align text horizontally.

Text alignment determines its appearance and the orientation of paragraph edges and can be left, right, centered, or justified. The paragraph tag is typically used to set text alignment

with the align attribute, which determines the alignment method. The align attribute can take the following values: left, right, center, justifyalignment to left, right, center and width respectively.

1. Make changes to the RASP.HTML file

HTML tutorial file

Schedule

classes on Wednesday.

3. Save the text with your changes in the rasp.html file.

4. Open the rasp.html document by double-clicking and check the result.

Make a Web page according to the following example.

The color of the text is indicated in brackets. Text alignment must be present.

Give the file a namebiscuit.html

The ability to correctly format CSS code is important for every web designer. This lesson is designed for beginners who are just taking their first steps.

Introduction

You need to be extremely careful when working with CSS. When writing code, you should maintain extreme concentration.

IN this lesson will show an example of how to create a simple HTML page using block layout(without using tables). We will also learn how to put styles into a separate style sheet.

Step #1 - Markup and use of tags

HTML markup always comes before styles. There's no point in jumping into CSS without having HTML completely ready.

HTML - hypertext language markings, other in HTML words describes the structure text information pages. Before we start applying CSS styles, we need to learn how to apply structure elements.

When constructing markup, we use "tags" that are surrounded by angle brackets. Tags are used to define something on a page. CSS is used later to determine where (in the browser) the content of a particular tag is displayed.

The simplest tags on a page are:

Most tags and content are used inside the tag .

A very important tag for separating and defining structure is the