Добавлен: 22.04.2023
Просмотров: 65
Скачиваний: 1
<div>
<a class="button1" href="#">Tell me about Html</a>
</div> </header>
Где также указывается класс "button1" для обращения в CSS и указывается ссылка на случай взаимодействия с кнопкой href="#".
2.2 Итог работы с файлом HTML
И вот мы уже описали содержания нашего сайта, на сайте будет меню, логотип, текст. Попробуем посмотреть, что получилось:
Вроде неплохо, но чего-то не хватает, в начале практической части я говорил о ярком пример, а наш получившийся сайт похож на простой набор ссылок и текста.
Как можно было заметить по тексту выше весь контент мы располагали в отдельных друг от друга блоках с тегом <div> при этом указывая класс каждого блока посредством атрибута class="". Все это необходимо было для того чтобы мы смогли описать стиль конкретного блока в CSS.
Итак, для придания современного вида сайта необходимо расписать как же должны располагаться наши блоки, текст и изображение которые мы описали в HTML документе.
Вид в Sublime Text будет такой:
Что мы видим в коде: мы видим, что идет обращение к различным блокам нашего сайта с целью указания каких-то характеристик. Разберем пару обращений.
Первое, что мы видим идет обращения к блоку <body> где расположен основной контент. Значением font-family мы задаем параметр каким будет шрифт. По умолчанию шрифт, установленный в браузере это Times New Roman. В нашем случаи мы будем использовать шрифт Arial. Далее идут значения такие как padding и margin. Эти значения задают характеристики полей блока и его отступа.
Так же в CSS описываются классы, которые мы указывали в различных блоках например: класс «.container» в нем указывается значение width: 800px. Это значение указывает ширину данного блока. На основной странице будет располагаться картинка поэтому в блоке header прописывается значение background и указывается путь к изображению.
Из всего кода видно, что весь контент на сайте разбит на определенные блоки, обращаясь к каждому блоку приписывается какая-либо характеристика. В этом и состоит задача CSS файла придать разные характеристики различным блокам и сформировать привычный для нас вид или же сделать определенный дизайн веб странички.
Посмотрим, что в итоге у нас получилось:
Вот это уже похоже на настоящий сайт!
На верху сайта у нас расположилось меню и логотип
По центру текст был выведен текст
И под конец была сделана кнопка
Заключение
Поставленная цель рассмотреть основы языка программирования и создать веб сайт достигнута.
На сегодняшний день создано множество хостингов и интернет порталов, дающие возможность простым пользователям создавать собственные веб сайты. При изучении вопроса создания веб сайта и его управлении начинает казаться, что изучать язык HTML совершенно не нужно так как уже придумано множество программ для разработки веб сайтов с привычным и понятным интерфейсом. Но это совсем не так как кажется на первый взгляд. Работая с HTML, мы можем создать собственный проект, у которого будет свой дизайн и свое строение, а программы и хостинги пользуются шаблонами и все сайты, созданные в них, будут выглядеть одинаково.
Подводя итоги проведенного изучения хочется отметить, что HTML это основа разработки сайта. Работая только с одним HTML невозможно создать уникальный проект поэтому необходимо изучать и другие языки программирования. Не знания основы невозможно продвигаться дальше, HTML это база, на которой строятся все веб сайты.
Приложением к настоящей курсовой работе идет исходный код документа Html и CSS разработанный в процессе подготовки материалов для данной работы.
Список литературы
- Чиртик А.А. HTML: Популярный самоучитель: учебник для бакалавров / Чиртик А.А. 2008. — 8 с.
- Дженнифер Роббин HTML5, CSS3 и JavaScript исчерпывающее руководство / Дженнифер Роббин 4- издание 2014. - 10-50 с..
- Самоучитель HTML для чайников [Электронный ресурс]. – Режим доступа: http://www. https://serblog.ru/demo/tutorial_html/steps/1step2.html– Заглавие с экрана. – (Дата обращения: 12.07.2018).
- МАКЕТ И ВЕРСТКА HTML+CSS [Электронный ресурс]. – Режим доступа: https://wayup.in/– Заглавие с экрана. – (Дата обращения: 10.07.2018).
- Брайан Хоган, HTML5 и CSS3. Веб-разработка по стандартам нового поколения / 2011. - 10-60 с..
- Дэвид Макфарланд, Большая книга CSS3 / 2014 5-50 c..
- Дронов.В.А. HTML.5.CSS.3.и.Web 2.0.Разработка.современных.Web-сайтов. / 2011 10-30 с.
- Питер Лабберс, HTML5 для профессионалов. Мощные инструменты для разработки современных веб-приложений. / Брайан Олберс, Фрэнк Салим / 2011. 10-80 с.
- Эрик Фримен - Изучаем HTML, XHTML и CSS / 2012.
- К.Сухов - HTML5 - путеводитель по технологии / 2013.
- Ташков П. А. - Веб-мастеринг. HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка / 2010
- Дэвид Кроудер - Создание веб-сайта для чайников / 2009.