Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Заметки HTML.docx
Скачиваний:
5
Добавлен:
29.09.2019
Размер:
663.03 Кб
Скачать

HTML(HyperText Markup Language)

<html>

<p>Someday, I will become a real webpage. With links and everything.</p>

<p>I'm like the Pinocchio of web pages.</p>

<p>Is this thing on...?</p>

</html>

p-paragraph.

_____________________________________________________________________________________

HTML documents contain two important parts:

  1. head - contains information about the document that is not displayed on the screen

  2. body - contains everything else that is displayed as part of the web page.

  3. Construction should look like this:

  4. <html>

  5. <head>

  6. <title>HTML - One O' One</title>

  7. </head>

  8. <body>

  9. <p>The body of your document goes here.</p>

  10. <p>Another paragraph. </P>

  11. </body>

  12. </html>

Headings(Размер шрифта от 1 до 6)

Headings are a way to order the content in the body in relative importance:

  • Most Important

  • Very Important

  • Important

  • Less Important

  • ... and so on.

You do this by using the heading tags.

Let's start with the <h1> tag which marks something as most important. For example, <h1>Most Important</h1>

<html>

<head>

<title>HTML - One O' One</title>

</head>

<body>

<h1> one </h1>

<h2> two </h2>

<h3> three </h3>

<h4> four </h4>

<h5> five </h5>

<h6> six </h6>

</body>

</html>

_____________________________________________________________________________________

Links(Ссылки)

<body>

<a href="http://codecademy.com">Click here to go to Codecademy</a>

</body>

Описание ссылок

<body>

<p><a href="http://www.codecademy.com" title="This will send you to Codecademy!">Go to Codecademy.com</a></p>

<p> <a href="http://www.vk.com" title="This will send you to VK!">Go to vk.com</a></p>

</body>

Сслыки в <ul>

<ul>

<a href="http://vk.com"><li>1</li></a>

</ul>

_____________________________________________________________________________________

IMAGES

<body>

<img src="http://www.mt-soft.com.ar/wordpress/wp-content/uploads/2007/07/html-logo.jpg" width="100" height ="50" />

</body>

Height, width – размеры изображения.

_____________________________________________________________________________________

IMAGES WITH LINKS

<body>

<a href="http://cnn.com"> <img src="http://cdn.codecademy.com/assets/courses/cnn.gif" height="82" width="119" /> </a>

</body>

_____________________________________________________________________________________

ССЫЛКА В НОВОМ ОКНЕ ( target="_blank" )

<p>

I have been using <a target="_blank" href ="http://www.codeyear.com/">CodeYear</a> to learn to code in HTML so that I will be able to make my own web-pages without having to use expensive WYSIWYG software!

</p>

_____________________________________________________________________________________

Размещение изображения на странице

align="right"

align="left"

align="center" пример:

<img src="http://www.kateglover.co.uk/html.png" align="right" />

СПИСОК (<ul>) (unordered list)

<ul> - ПУНКТИКИ СПИСКА ОТМЕЧЕНЫ ТОЧКОЙ.

a pony

world peace

iPhone 7

</ul>

_____________________________________________________________________________________

СПИСОК ( <li> ) (list item)

<ul>

<li>a pony</li>

<li>world peace</li>

<li>iPhone 7</li>

</ul>

Список (/ol) (ordered list)

<ol>

<li>Amass wealth.</li>

<li>Charm my way into meetings with world leaders.</li>

<li>Hypnotize them and take over their countries.</li>

<li>Cackle maniacally and stroke my hairless cat.</li>

</ol>

Появляется нумерация пунктов.

<!-- this is a comment! shhhh! -->

_____________________________________________________________________________________

Цветной текст

<p style="color:red;">I identify as a violet!!</p>

<p style="color:#0000FF;">I identify as a violet!!</p>

<th colspan="2" style="color:red;">Actors by Birth Year</th>