Assignments for independent work html styles. Practical work on html and css

Practical work by 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. Click right click mouse and select “New” - “Empty file”.

3. Enter the file name rasp.html.

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

5. Dial the simplest html document:

Training HTML 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 appearance your Web page has not 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 corresponds to a specific style, specified by parameters 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 attribute COLOR=”X”. Instead of

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

meaning. When specifying color hexadecimal number need to imagine this 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

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

Reg.ru: domains and hosting

The largest registrar and hosting provider in Russia.

More than 2 million domain names in service.

Promotion, domain mail, business solutions.

More than 700 thousand customers around the world have already made their choice.

*Mouse over to pause scrolling.

Back forward

30 Good CSS Practices for Beginners

CSS is a language used at some point by almost every developer. Although we sometimes take it for granted, it is nonetheless a powerful tool and has many nuanced applications that can help (or hinder) good design. this process). Below are 30 good recommendations, which will help you write correct and literate code, avoiding many common mistakes.

1. Make it easy to read

Easy readability of your CSS file is very important, although many people underestimate this point. Good readability allows you to simplify your work with it in the future, with the support of the site, since you will find the elements you need many times faster. Also remember that your file may need to be reviewed and corrected by someone else.

The note
When writing CSS files, most developers fall into two groups, two extremes.

Group 1: All in one line

SomeDiv ( background: red; padding: 2em; border: 1px solid black; )

Group 2: Each style has a separate line

SomeDiv ( background: red; padding: 2em; border: 1px solid black; )

In fact, both practices are quite good, although disagreements between representatives of these groups are not uncommon! Just keep in mind - you need to choose the option that you like to look at. That's all.
The note

2. Make it whole

In addition to making your code more readable, make it more consistent. You should start developing your own CSS "sub-language" that will allow you to adhere to a specific naming style. There are a certain number of classes that I create almost always, and I give them the same names every time. For example, I use .caption-right to align pictures to the right.

Think about whether and when you will use dashes and underscores in your class names and IDs. When you start creating your own CSS standards, you become much closer to being a CSS professional.

3. Start with a framework

Many people think that you shouldn't use CSS frameworks, but I think that if someone took the time and made a program that can speed up the development process, then why reinvent the wheel? I know that frameworks should not be used everywhere, but in many cases their use is quite justified.

Many designers create their own frameworks as they work, and this too great idea, allowing you to maintain uniformity and integrity of code across different projects.

The note
I don't agree. CSS frameworks are an indispensable thing, but only for a few, for those who know how to use them well.

"It's less a question of reinventing the wheel and more a question of understanding how it works."

If you are just starting to understand Cascading Style Sheets, I would recommend that you stay away from various frameworks for at least a year. Otherwise you will simply confuse yourself. Learn CSS first, then optimize your work with this language.
The note

4. Use zeroing

Most CSS frameworks have a built-in style nullifier, but if you don't intend to use it, you can resort to other nullifiers. Resetting styles allows you to avoid many problems with uneven display in different browsers, setting clear parameters for font sizes, headings, external and padding etc. This “zeroing” allows you to achieve the same display in all browsers.

Here are links to some of the most popular resets: MeyerWeb, Yahoo's developer reset. Alternatively, you can come up with your own “nullifier”, using the following as a basis.

5. Structure your style files from top to bottom

It always makes sense to structure CSS file so that you can quickly find the part of the code you need. I recommend using a top-down approach, which is to build your stylesheet in the order in which the styles are applied on the page. Eg:

1. General classes (body, a, p, h1, etc.) 2. #header 3. #nav-menu 4. #main-content

Don't forget to add comments to each section!

/****** main content *********/ styles go here... /****** footer *********/ styles go here...

6. Group elements

Often elements may have intersecting, general styles. Instead of rewriting existing code, simply group elements together. For example, your headings h1, h2 And h3 may have the same font and color:

H1, h2, h3 (font-family: tahoma, color: #333)

7. Create HTML Markup First

Many developers create a CSS file in parallel with the creation HTML markup. This seems logical, but you can still save a lot of time if you understand HTML first and styles second. This approach allows you to think about the page as a whole, think about where to apply which styles, resulting in a more cohesive top-down style file.

8. Apply multiple classes to an element if necessary

Sometimes it is better to apply several classes to an element at once. Let's say you have a container div to whom you want to ask float:right, and you already have a class .right in your styles file, which aligns everything right. You can simply add another class to your container div:

You can add as many classes as you need, separating them with spaces.

The note
Be very careful when using names like left And right. Imagine that you suddenly need to align a container to the left. In this case, you need to go back into the HTML code and change the class name - all in order to change visual display On the page. This is unsemantic. Remember: HTML is for markup, CSS is for visual presentation.

If you need HTML edits to change the layout of the page, you're doing something wrong!

9. Use the correct Doctype tag

Elements belonging to both types include:

Span, a, strong, em, img, br, input, abbr, acronym

Block elements include:

Div, h1...h6, p, ul, li, table, blockquote, pre, form

13. Arrange properties alphabetically

Using such a system for arranging properties will allow you to save a lot of time when searching for the desired property.

#cotton-candy ( color: #fff; float: left; font-weight: height: 200px; margin: 0; padding: 0; width: 150px; )

The note
Eh.., sacrifice speed for slightly improved readability.. See for yourself..
The note

14. Use CSS compressors

CSS compressors help you significantly reduce the size of your stylesheet file by removing unnecessary line breaks and combining elements. All this allows your site to load faster. CSS Optimizer and CSS Compressor are two great online services for performing such tasks.

Along with reducing the file size, you naturally get a significant deterioration in its readability, so use such services when making changes to styles is no longer expected.

15. Use generic classes

You'll soon notice that there are styles that you use over and over again. Instead of adding this style to each ID, you can create generic classes and add them to the IDs of other CSS classes (see recommendation #8 in this article).

For example, I noticed that I use float:right And float:left again and again in my designs. I'm just adding classes .left And .right to my style file and apply it to the elements.

Left (float:left) .right (float:right)

This way you don't have to write all the time float:left for all elements to which this property should be applied.

16. Use "Margin: 0 auto" to center the design

Many people new to CSS don't understand why they can't just use float: center to achieve the centering effect for block elements. If only it were that simple! Unfortunately, you have to do it like this:

Margin: 0 auto; /* 0 - for top and bottom; auto - for left and right */

17. Don't put everything in a DIV

It's often tempting to do something like:

This may seem like a pretty good solution, but it will start to clutter your styles file. Instead, make it simple:

Header Text

And already for the tag h1 you can set any design you need.

18. Use Firebug

Did you like the material and want to thank me?
Just share with your friends and colleagues!

Tasks for HTML basics are designed to consolidate work with a set of the following topics: HTML structure , comments in HTML, main tags, basic HTML attributes . .

Tasks for images in HTML: inserting an image in HTML(HTML image code), HTML size Images, image alignment...in HTML.

Advanced HTML and CSS assignments

HTML assignments with Emmet. Fast layout, Emmet commands (so-called Emmet cheat sheet). After completing tasks with the Emmet plugin, the speed of your layout/development will increase significantly. .

Tasks on CSS selectors. CSS selectors: css class selectors, css attribute selectors, neighboring css selectors , css context selectors, child selectors + in css, selector priority. .

Job CSS positioning important for understanding complex layout. Here are tasks to understand and work with: position absolute, position relative, position fixed And position static, top CSS properties left bottom right. .

Form layout tasks

1. Create an authentication form on the site, the same as in Twitter Bootstrap(without using this framework). For example, as in .
2. Create a dispatcher form on the website
3. Connect jQuery plugin to select date/month from field
4. Create a checkbox similar to a social network.
5. Create a site visitor registration form
6. Create a form similar to the one that sorts products in Yandex.Market

One of the tasks of a layout designer is to write cross-browser code. Code that will make the pages look like the greatest number browsers are the same or as similar as possible. .

Modern features CSS allows you to create wonderful and work with the background by coloring it gradient fill . Small set CSS animation tasks.

Tasks for media queries (mobile sites). Creation mobile version site is an important part of web developer skills. Assignments are devoted to the following topics: mobile website creation, checking the mobile version of the site. .

Assignments for psd layout layout and CSS frameworks. Website layout based psd layout — the most important part work of a web designer. On HTML lessons we look at the main steps layouts from psd to HTML. Tasks .