USA2017 :: "Lesson 06." - Images.

I searched all day along and finally found out all I need on USA2017.
/From the "Feedback collection on USA2017.INUMO.RU", USA2017.INUMO.RU./

Images. Lesson 06. Place a file with your picture into a special folder, f.e. images. It is a good idea to keep all images in one special folder (f.e., images) to make easy images browsing and searching. Images are defined with the <img> tag. The <img> tag is empty, it contains attributes only, and does not have a closing tag. The src attribute defines the web address, url of the image. We can use special attributes "width" and "height" to specify the width and height of an image.

First publication rights USA 2017 com

Lesson 06. Images.

Place a file with your picture into a special folder, f.e. images. It is a good idea to keep all images in one special folder (f.e., images) to make easy images browsing and searching.

We all files html keep in folder:
usa2017.inumo.ru/html/
All images (graphic files jpg, png, gif, etc) in special folder images:
usa2017.inumo.ru/html/images/

PS. We talk about files for this HTML tutorial.

So lets try to set an image on on our test web page.

<img src="images/petrov_ilf_usa_1935.jpg" width="300" height="400" class="" style="width:300px; height:400px; outline:3px dotted #BBBBBB;" alt="Eugene Petrov and Ilya Ilf have studied USA in 1935." title="Eugene Petrov and Ilya Ilf have studied USA in 1935." />

Here we use the <img /> tag to define an image. The <img /> tag is ordinary tag. It does not have a closing tag. The <img /> tag is empty. It contains attributes only, f.e. src, width, height. Compare with paired tags <p></p>, <h1></h1>, <ul></ul>.
There are two methods to specify the width and height of an image.

Use the special width and height attributes: width="300" height="400"
Use the style attribute: style="width:300px; height:400px;"

We use both methods in our sample. Please note, style attribute is "stronger". If you type, f.e. width="300" and style="width:100px;", width of an image would be 100 pixels.

The alt attribute specifies an alternate text for the image, if it cannot be displayed. The value of the alt attribute should describe the image in words. Screen readers are software programs that can read what is displayed on a screen. Used on the web, screen readers can "reproduce" HTML as text-to-speech output. Screen readers are used by people who are visually impaired, blind, or learning disabled. Screen readers can read the alt attribute.

The global title attribute specifies an tool tip text for the image (a text appeared when mouse is on the image).

Now our test web page with image:
article_006_1.html

Please note: although the image has the width much smaller than the width of the screen, the browser takes for the image all space in width, by placing the subsequent content below, but not at the right of the image there are still a lot of free space.

To make the text be placed around the image we can use the style attribute with the following parameters:

float:left; - the image floats to left, and the text will wrap around the image from right...
float:right; - the image floats to right, and the text will wrap around the image from left...

I think for for test page better to place the image at right side.

With margin property in style attribute we define a margin (space) between the image and text: margin:10px 20px 30px 40px; ( top 10px, right 20px, botton 30px, left 40px). Old attribute for this effect: hspace="40" and vspace="20".

For better understanding of elements placement we set backgrounds for our paragraphs. This will allow us to better visualize how objects take space of the page and how these objects intersect.

New looks of our test webpage, with an image on the right side. ↓

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Test webpage after lesson 6, with an image.</title>
</head>
<body>
<h1 style="text-align:center; background-color:#F0FFFF;">"One-Storied America"</h1>
<h2 style="text-align:center; background-color:#F0FFFF;">"Odnoetazhna Amerika", <span style="background-color:#FFF0FF;">"Одноэтажная Америка"</span></h2>

<img src="images/petrov_ilf_usa_1935.jpg" width="300" height="400" class="" style="width:300px; height:400px; float:right; margin:10px 20px 30px 40px; outline:3px dotted #BBBBBB;" alt="Eugene Petrov and Ilya Ilf have studied USA in 1935." title="Eugene Petrov and Ilya Ilf have studied USA in 1935." />

<ol class="ul1" style="background-color:#F0F0F0;">
	<li>Тhe Normandie</li>
	<li>The First Evening in New York</li>
	<li>What Can Be Seen From A Hotel Window</li>
	<li>Appetite Departs While Eating</li>
	<li>We Seek An Angel Without Wings</li>
	<li>Papa And Mamma</li>
	<li>The Electric Chair</li>
	<li>A New York Arena</li>
	<li>We Purchase an Automobile and Depart</li>
</ol>
<p style="background-color:#F0F0F0;">...</p>
<ol type="1" start="34" class="ul1" style="background-color:#F0F0F0;">
	<li>Сaptain Х</li>
	<li>Four Standard Types</li>
	<li>The God of Potboilers</li>
	<li>Hollywood Serf</li>
	<li>Pray, Weigh Yourself, and Pay</li>
	<li>God’s Country</li>
</ol>
<p style="background-color:#F0F0F0;">...</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">When we finally freed ourselves it was already evening. A white taxi-cab with three gleaming lanterns on its roof, looking like an old-fashioned carriage, took us to the hotel. At first we were tormented by the thought that because of our inexperience we had got into the wrong taxi, into some antiquated vehicle, and that we were funny and provincial. But, having fearfully looked out the window, we saw that automobiles with just as silly little lamps as ours were going in all directions back and forth. We quieted down a little. Later we were told that these little lamps are placed on the roof, so that the taxi may be more noticeable among a million other automobiles.</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">Right on the sidewalk, by the wall of the building, lay tomorrow's newspapers. Passers-by bent down, took a New York Times or Herald Tribune and placed two cents on the ground beside the newspapers.</p>
<p style="background-color:#F0F0F0;">-----</p>
<div style="background-color:#F0F0F0;">In a word, we started off at a trot. We sped by signs on which in lights were outlined the words: 
<ul class="ul1">
	<li>"Cafeteria"</li>
	<li>"United Cigars"</li>
	<li>"Drugs—Soda"</li>
</ul>
or something else equally enticing yet so far utterly incomprehensible. Thus we ran to Forty-second Street, and there we stopped.</div>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">At that very moment, when it occurred to us that we were so far from Moscow, before us floated the lights of the Cameo motion-picture theatre. The Soviet film, The New Gulliver, was being exhibited there.</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">From one shabby little house came dull singing. The man who stood at the entrance to the house told us that this was the night lodging of the Salvation Army.<br>
"Who may sleep here?"<br>
"Anyone. No one is asked his name. No one is asked about his occupation or his past. Here night lodgers receive bed, coffee, and bread free of charge. In the morning they also get coffee and bread. Then they are free to go away. The sole condition is that they must take part in the evening and morning prayers."</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">The old man talked with extraordinary facility; it seemed therefore I hat he was now appearing for at least the thousandth time. He clicked his fingers, laughed hoarsely, sang religious ditties, and ended up with great enthusiasm, shouting:<br>
"Let's sing, brothers!"
Again the dull, humdrum singing began.</p>
<p style="background-color:#F0F0F0;">-----</p>
<div style="background-color:#F0F0F0;">In the corners stood the prices: 5, 10, or 15: cents apiece, or 15 cents for two, or 10 cents for three. Even more tightly than the cigars lay small packages of cigarettes in soft covers, also wrapped in cellophane. Americans seem to smoke mostly
<ul style="list-style-type:square" class="ul1">
	<li>"Lucky Strike," a dark green package with a red circle in the middle;</li>
	<li>"Chesterfield," a white package with a gold inscription;</li>
	<li>"Camel," a yellowish package bearing the picture of a brown camel.</li>
</ul>
</div>

<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">We walked into the elevator, and it rushed up. On the way the elevator stopped, the Negro opened the door, cried "Up!" and the passengers called out the numbers of their floors. A woman entered. All the men removed their hats and travelled on without hats. We followed suit. That was the first American custom we learned.</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">At the twenty-seventh story we left the elevator and walked along a narrow corridor to our rooms. The large second-rate New York hotels in the centre of the city are built very economically. Their corridors are narrow, their rooms, although expensive, are small, and their ceilings are of standard height—that is, rather low. The client poses before the builder the problem of squeezing into a skyscraper as many rooms as possible. These small rooms, however, are clean and comfortable. They always have hot and cold water, a shower, stationery, telegraph blanks, postcards with views of the hotel, laundry bags, and printed laundry blanks on which you merely place figures indicating the number of pieces of soiled laundry being sent out.</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">In the room was furniture which subsequently we saw in all the hotels of America without exception—in the East, the West, and the South. We did not visit the North.</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">On the commode we found a fat little book in a black cover. On the book was the gold trade-mark of the hotel. The book proved to be a Bible. This ancient composition had been adapted for business people whose time is limited. On the first page was a table of contents especially composed by the solicitous management of the hotel:<br>
"For allaying spiritual doubts—page so-and-so, text so-and-so. <br>
"For family troubles—page so-and-so, text so-and-so. <br>
"For financial troubles—page . . ., text. . . <br>
"For success in business—page . . ., text . . ." <br>
That page was somewhat greasy.</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">The windows of our little rooms looked out on three sides. Below lay New York at night.</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">The newcomer need have no fear about leaving his hotel and plunging into the New York jungle. Despite the amazing sameness of its streets, it is well-nigh impossible to get lost there. Yet the secret is simple. The thoroughfares are divided into two types: the perpendicular ones, or avenues; and the horizontal, or streets.</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">The automats have progressed farther along this road than the cafeterias. Although they have approximately the same outward appearance as the cafeterias, they differ from the latter in that they have carried the process of pushing food into American stomachs to the point of virtuosity. The walls of the automats are occupied throughout with little glass closets.    Near each one of them is a slit for dropping a "nickel" (a five-cent coin).</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">Generally speaking, New York is remarkable because it has everything. There you can find the representatives of any nation, secure any dish, any object from an embroidered Ukrainian shirt to a Chinese stick with a bone handle in the shape of a hand, which is used for back-scratching, from Russian caviare and vodka to Chilean soup and Italian macaroni.</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">All this beautifully prepared food is quite tasteless—colourless in taste. It is not injurious to the stomach. It is most likely even of benefit to it. But it does not present man with any delights, any gustatory satisfaction. When you select in the closets of the automat or on the counter of the cafeteria an attractive piece of roast, and then eat it at your table, having shoved your hat under your chair, you feel like a buyer of shoes which proved to be more handsome than substantial. Americans are used to it. They eat fast, without wasting a single extra minute at the table. They do not eat; they fill up on food, just as an automobile is filled with petrol. The French gourmet who can sit four hours at a dinner, chewing each piece of meat in exultation, washing it down with wine and then smacking every mouthful of coffee with cognac—he is, of course, no model man. But the cold American eater, bereft of the natural human desire to get some satisfaction out of food, evokes amazement.</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">The performer again passed across the stage, sacrificing what little was left of her garments. To satisfy the theatre censorship, she held a bit of clothing before her with one hand. After the first dancer and singer another came out and repeated exactly what her predecessor had done. The third one did what the second had done. The fourth, fifth, and sixth did not make any new contributions. They sang without voice and without ear, and they danced with the grace of a kangaroo. But they disrobed. The other ten girls took their turns in faithfully repeating the same performance.<br>
The only difference between them was that some were brunettes (these were fewer in number), while others were light-haired lambs (there were more of these).<br>
This Zulu solemnity continued for several hours. It is pornography mechanized to such an extent that it acquires a kind of industrial and factory character. There is as little eroticism in this spectacle as in a serial production of vacuum cleaners or adding machines.</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">Having finished his explanation, the workman smiled and said:<br>
  "Hurrying to the electric chair?   Wish you luck!"</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">Moscow has seen the pictures of Lewis Milestone, King Vidor, Reuben Mamoulian, and John Ford: cinematographic Moscow has seen the best pictures of the best directors. Moscow theatre audiences have admired the little pigs, the penguins, and the Disney mouse, and were delighted with the masterpieces of Chaplin. These directors, with the exception of Chaplin who releases one picture in several years, make five, eight, ten pictures a year. But, as we already know, Americans "shoot" eight hundred pictures a year.</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">All these pictures are below the level of human dignity. It seems to us that it is degrading for a human being to look at such pictures. They are designed for birds' brains, for slow-thinking human cattle of camel-like lack of fastidiousness.</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">We saw a young man standing in the middle of the pavement. On his chest hung a placard which read:
I am hungry. Give me work.</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">The first elevator lifted us at once to the eighty-sixth story. The rise lasts only one minute. Naturally, one could not see here either stories or landings. We raced in a steel tube, and only the ears, which seemed to have filled with water, and a strange little chill around the region of the abdomen, made us aware of the fact that we were rising at an incredible rate of speed. The elevator did not clang or knock. It moved precipitately, smoothly, noiselessly. Only at the door tiny lamps flared, counting off tens of stories. At the eighty-sixth story landing we stepped out on somewhat weakened legs.</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">-----</p>
<p style="background-color:#F0F0F0;">PS. Ilf and Petrov's travel memoir, "One-Storied America", 1937 <br>
(rus original "Odnoetazhna Amerika", "Одноэтажная Америка")<br>
I don't know why, in USA this novel called "Little Golden America". Ilf and Petrov were against such strange title translation. <br>
There are random pieces from this novel to study HTML language. <br>
More info: /html/</p>

<h6 style="background-color:#F0F0F0;">----- The end of the page -----<h6>
<!--// 
Comments here...
Ы - just to force UTF-8 encoding
//-->
</body>
</html>

So we have placed mentioned above things on our test webpage:
article_006.html ← click to view, how it looks on this website...
article_006.zip ← download this webpage in zip archive to set on your website.

To visit more lessons use navigation bar below ↓,

More Info about "HTML and Internet basics" → ↓

"1&1" - one of the largest web hosts in the world.

Register with one of the largest web hosts in the world.

Our broad product portfolio of domains, website packages, web hosting packages and high-end server solutions gives you plenty of choice.

Click Here → ↓

Happy new searching to you!

What to do and where to go?

USA2017.INUMO.RU :: main page. Somebody think about future. We make future today. Peace, freedom, happiness for everyone in USA and everywhere on the Earth in 2017.
Email to president of USA in 2017 :: don't hesitate to share your info with administrative staff of USA2017. Help us make world around better.
Map of the USA 2017 :: there are links to main sections of USA2017 website.
USA 2017. Search page. Search Box. :: What is search? Search is the activity of looking thoroughly in order to find something or someone. Life is searching and searching is a zest of our life. When you try to locate or discover, or try to establish the existence of something, use the search box on USA 2017.
HTML tutorial on USA 2017, main page. :: HTML is an ace of base of Internet. This HTML tutorial has been created for newcomers to let them quickly understand Internet basics. From other side, experienced users also will found some lessons to be useful. This HTML tutorial contains hundreds of HTML examples. Also there are built-in lab works to ease for users process of understanding how some opportunities are actual today.
Software portal on USA 2017 :: Best software for all your needs online and ofline.
Chess portal on USA2017. :: Chess is the best game over the world. Chess makes your brain work good and your soul feel happy. Chess is taught to children in schools around the world today. Many schools host chess clubs, and there are many scholastic tournaments specifically for children. Tournaments are held regularly in many countries, hosted by organizations such as the United States Chess Federation and the National Scholastic Chess Foundation. I don't think about chess as a sport, for me chess is an art.
Love Me Do! :: Best matchmaking systems
Toggle numbers on left and right :: Click here if you want to remove or set back numbers on the left and right sides of your screen.
Remove ads :: Click here if you want to remove ads off this page.
Change ads :: Click here if you want to change ads on this page. After your click, all ads will be resorted by following way: ad1 → ad2, ad2 → ad3, ad3 → ad1.

If you plan to come back later...
Please remember this page -
URL: https://usa2017.inumo.ru/html/p006.html

USA 2017 "Lesson 06." - Images.

USA2017 :: "Lesson 06." - Images.

What to do and where to go?