Я вас всех радостно приветствую, мои дорогие друзья. Сегодня с вами как всегда Дмитрий Костин, и у меня для вас небольшой сюрприз, а именно экзамен! Хотя ладно, насчет экзамена я пошутил. Просто я решил закончить уроки по основам html и в этой статье применить знания, полученные на предыдущих уроках на практике.
Я хочу вам показать простой пример создания сайта html в блокноте Notepad++ за считанные минуты. Конечно сайтик мы создадим простой, не замороченный, быстрый, и я бы даже сказал лоховской (простите за мой французский))). Но все же, благодаря этому вы сможете закрепить полученные знания. Это действительно важно в этом деле.
Только не забудьте при создании нового документа в Notepad++ перекодировать его в UTF-8.
Вы спросите: «А почему так мало уроков? В html гораздо больше тегов и атрибутов». Да-да, вы действительно правы, но время идет и многие теги уже не работают в последних версиях html, либо же просто считаются ненужными и ими никто не пользуется.
Вот например есть тег , который отвечает за шрифт. Благодаря ему и атрибутам, можно изменять внутренний контент, например размер шрифта, цвет, сам шрифт. Но сегодня, как я уже и сказал,
не принято использовать. Такой код уже не будет являться валидным. Вместо этого мы используем CSS. Это намного удобнее и практичнее. Ну да ладно. Давайте лучше приступим созданию сайта.
Я в документе отметил те места, где вы должны будете эти списочки делать, но конечно же на всякий случай я покажу как это должно выглядеть.
Сохраняем и смотрим, что у нас получилось. Вроде все как надо. Отлично. Уже продвинулись далеко вперед.
Вставка таблицы
Откройте в блокноте страницу table.html
, перетащите из одноименного вордовского документа все заголовки и текст, после чего расставьте все теги и атрибуты как надо.
Вот теперь переходим к тому, что нам нужно. Создаем таблицу в 5 строк и 5 столбцов, после чего вставляем в них соответствующие значения. Не забываем ставить нужные атрибуты, а именно border="2", cellpadding и
cellspacing
по 5. В коде это должно выглядеть примерно так:
Сохраняем и смотрим, что у нас получилось. Всё отлично!
Страница об авторе
Мы уже почти всё сделали. Нам только осталось закончить страницу об авторе. Зайдите в страницу obo-mne.html
и вставьте из одноименного вордовского документа весь текст со всеми заголовками и расставьте теги.
Короче, теперь после тегов шапки сайта и менюшек вам нужно будет прописать адрес этой картинки и поставить атрибут align="left"
, что текст оплетал фотографию. Если выглядит некрасиво, то можно поиграться с отступами на несколько пикселей. Примерно это должно выглядеть так.
Все сделали? Всё получилось? Я надеюсь, что да. Но теперь нам нужно . В документе ссылка есть. Всё, что вам нужно — это просто вставить ее после основного текста. Если вдруг видео налезает на фотографию автора, то просто после текста сделайте парочку отступов с помощью
.
Ну вот вроде бы и всё. По заданию всё выполнено и теперь у вас есть такой простенький html сайт, сделанный в блокноте Notepad++ буквально за 10-15 минут. Несмотря на то, что это наипростейший html каркас без CSS свойств и других приблуд, оказывается до сих пор существуют люди, которые продают курсы аля «Как создать сайт» с информацией, подобной этой. Причем берут за это деньги — и 500 рублей, и даже 2000. Я просто в шоке!)
Уж если и брать какие-то курсы, то лучше у профессионалов, которые собаку на этом съели. Лично я рекомендую вам посмотреть курс Андрея Бернадского "HTML5 и CSS3 с нуля до гуру
". Курс просто потрясающий, несложный в освоении и рассчитанный на любой уровень пользователя. Благодаря ему вы реально научитесь верстать довольно неплохие сайты.
Кстати как ваши ручки? Надеюсь, что вы не филонили и всё прописывали своими чудесными ручками. Я надеюсь, что каши в голове у вас нет и я все нормально объяснил. Ну а если у вас что-то не получилось, то в папке лежит готовая версия нашего сайта со всеми комментариями, чтобы вы смогли разобраться.
Фух. В общем на сегодня я всё. Воды сегодня выпил литра 4 наверное из-за жары. Так что надеюсь, что вам моя статья понравилась и была полезной в плане изучения. Не забывайте подписываться на новые статьи моего блога. Я вам расскажу еще много всего интересного. А вам я желаю удачи и спокойно перетерпеть жару. Ну а я пошел охлаждаться. Увидимся. Пока-пока!
С уважением, Дмитрий Костин.
Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу.
Описание html тегов из примера
1.
- эти теги должны присутствовать на каждой веб-странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница.
Любая html страница имеет следующую структуру:
...
Заголовочные теги
...
...
Тело страницы
...
2.
- между этими тегами заключается весь
видимый контент страницы.
4.
- между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег
часто сокращенно называют "тайтлом". Советую ознакомиться со статьей: как составить тег
</p>
<p>Теперь перейдем к тегам, которые находятся в теле <a href="/windows/sozdat-stranicu-na-php-sozdanie-html-stranic-s-pomoshchyu-php-php-i-sessiya/">html страницы</a> (внутри <body>
и </body>
).</p>
<p>5. <center></center>
- эти теги выравнивают все, что находится внутри них по центру. В данном случае центром будет - центр экрана. В будущем рекомендуется отказаться от использования этих тегов.</p>
<p>6. <h1></h1>
- это один из класса тегов заголовочных тегов <h1>..<h6>
, обычно в него заключают название страницы. Например, у этой странице заголовочный тег "Пример создания html страницы".</p>
Примечание
<p>эти теги имеют большой вес в ранжировании сайта , поэтому ими необходимо пользоваться аккуратно и с умом.</p>
<p>При составлении html-кода нужно придерживаться простого правила: сначала должен идти заголовочный тег <h1>
, а дальше могут идти уже <h2>
, <h3>
и т.д. Главное, чтобы не было сначала <h2>
, потом <h1>
, потом <h3>
и т.п. Должна быть строгая иерархия. Заголовков <h2>
, <h3>
и т.п. может быть много.</p>
<p>7. <br/>
- это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.</p>
<p>8. <span><img src='https://i2.wp.com/URL_ИЗОБРАЖЕНИЯ' loading=lazy>
</span> - это одиночный тег, который выводит изображение.</p>
<ul><li>src
- обязательный параметр, в котором указывается адрес изображения (вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение).
<br><u>Примечание
</u>:
<ul><li>Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения, иначе нужно прописывать либо абсолютный или относительный URL ;</li>
<li>Не забудьте указать расширение изображения. Например, .jpg
, .gif
, .jpeg
.</li>
</ul></li>
<li>alt
или title
- в эти параметры можно записать описание к Вашему изображению. Когда Вы наведете мышкой на изображение, то появится это описание. Эти параметры важны для продвижения сайта , особенно в поиске по картинкам. Если изображение не удалось загрузить, то будет выведен этот текст, что также является плюсом.</li>
</ul><p>9. <font></font>
- эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно настроить в одном теге. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке.</p>
<p>Примечание:
- аналогичный тег.</p>
<p>Есть также свойство CSS font , в котором можно задавать все эти параметры.</p>
<p>10.
- выделить жирным. Все, что заключено между <b>
и </b>
будет выделено жирным. Например, если Вы напишите его в самом начале контента, а закроете в самом конце, то весь текст на странице будет выделен жирным. Это довольно часто встречающийся тег, аналогом которого является <strong></strong>
.</p>
<p>Поисковые системы обращают внимание на этот тег в плане усиления влияение ключевых слов. Но нужно быть аккуратным, поскольку выделять каждый раз жирным ключевые слова будет воспринято за спам.</p>
15 голосов
<p>Приветствую вас на страницах блога Start-Luck. Сегодня мне бы хотелось показать вам, как использовать код. Писать сайты – интересное занятие, которое многим может казаться невыполнимо сложным. На самом деле простенькую страничку можно создать всего за 5 минут.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/citata-1-88.jpg' align="center" width="100%" loading=lazy></p> <p>В этой статье я расскажу про создание html страницы. Выполним мы эту задачу менее, чем за 10 минут, а потом более подробно разберемся с основными тегами. Было бы неправильно называть подобную публикацию уроком. Это скорее затравка, которая призвана показать вам простоту работы и родить в вас желание двигаться дальше, изучить больше, делать лучше.</p> <h2><span>Как создать страничку
</span></h2> <p>Первую страницу я предлагаю вам сделать в блокноте. Самом простом, который находится в меню «Пуск», папка «Стандартные». Пока не нужно ничего скачивать. Попробуйте воспользоваться тем, что имеете.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/1-165.jpg' align="center" height="500" width="455" loading=lazy></p> <p>Откройте документ.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/2-163.jpg' align="center" width="100%" loading=lazy></p> <p>Вставьте в него вот этот код.</p>
<table><tr><td class="code"> <<span>html
>
</span>
<<span>head
>
</span>
<<span>title
>
</span>Моя первая страница<<span>/
title
>
</span>
<<span>/
head
>
</span>
<<span>body
>
</span>
<<span>center
><h1
>
</span><<span>/
h1
></
center
>
</span><<span>br
/
><br
/
>
</span>
<<span>center
></
center
>
</span>
<<span>br
/
><br
/
>
</span>
<<span>font
style
=
"color:red"
>
</span><<span>/
font
>
</span>
<<span>br
/
><br
/
>
</span>
<<span>b
>
</span><<span>/
b
>
</span>
<<span>br
/
><br
/
>
</span>
Мы дошли до самого низа
<<span>br
/
><br
/
>
</span>
Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино.
<<span>br
/
><br
/
>
</span>
<<span>hr
>
</span>
К примеру, вот ссылка на мой блог - <<span>a
href
=
"https://сайт/"
>
</span>Start-Luck<<span>/
a
>
</span> - рассказывает просто о "сложном".
<<span>br
/
><br
/
>
</span><<span>br
/
><br
/
>
</span>
<<span>/
body
>
</span>
<<span>/
html
>
</span>
</td>
</tr></table><p><html>
<head>
<title>Моя первая страница
Создать страницу проще, чем вы думаете
Многим может показаться, что создание сайтов дело сложное, даже невыполнимое. Для этого нужно много учиться, узнать, сделать. На самом деле существует около 100 тегов, которые даже не обязательно учить. Важно лишь понять, что и где применяется. Информацию можно подсмотреть в различных шпаргалках, а со временем вы начнете вспоминать теги на автомате.
Простой код позволяет сделать текст красным
Написать жирным не намного сложнее
Мы дошли до самого низа
Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино..
Ну вот и все. Ваша первая страница готова
