создание сайтов. Tmlсайты не обязательно имеют примитивный дизайн. Существует множество

• Название: Tmlсайты не обязательно имеют примитивный дизайн. Существует множество
• Дата: 03.10.2022
• Размер: 130.14 Kb.
• Имя файла: создание сайтов.docx
• Тип: Документы; #711225

TML-сайты не обязательно имеют примитивный дизайн. Существует множество бесплатных HTML шаблонов, ничем не уступающих по привлекательности тем, что используются в конструкторах сайтов или CMS. Но большие проекты на них неудобно делать. Много страниц – много мороки, поскольку редактирование каждой требует копания в коде. У них нет панели управления, также все страницы будут статическими – никаких блогов, форумов и т. д.

HTML-сайты чаще всего имеют формат лендингов и сайтов-визиток. В этих сценариях они себя более-менее оправдывают – работают быстро, не грузят сервер, не требуют подключения базы данных. Весь контент содержится в самих страницах. HTML отвечает за вёрстку, структуру блоков, а при помощи каскадных таблиц стилей (CSS) этим элементам можно придать необходимый внешний вид и формат (шрифт, цвет, фон, форма, отступы и т д.).

Вёрстка в HTML бывает табличной (table – устаревший стандарт) и блочной (div – именно её сейчас используют). Язык использует обширный набор тегов, почти все из которых используются парой – открывающий и закрывающий теги (например,

- тег абзаца), внутри которых содержится контент. В CSS используются атрибуты, свойства и их значения, подключаемые к отдельным элементам HTML-каркаса страницы. То есть можно выборочно придавать желаемый вид каждому элементу на сайте по отдельности.

Мы не ставим своей целью обучить вас синтаксису языков – если нужно, то без труда сможете найти сотни уроков и справочников по ним в Сети. Покажем основу – как сделать простой сайт на HTML в блокноте, создать своими руками веб-страницу по тем же стандартам, что используют все посещаемые вами сайты. На примере вы сможете уловить суть процесса, оценить для себя, интересна ли вообще эта тема.

 

Шаг 1 – создание страницы формата HTML

Откройте стандартный блокнот для Windows (или любой другой текстовый редактор – Notepad++, Sublime Text - неважно), откройте меню «Файл», выберите «Сохранить как», измените кодировку с ANSI на UTF-8 (для правильного отображения русских букв в браузере), впишите заголовок веб-страницы и измените расширение на html (оно идёт после точки), после чего сохраните изменения.



 

Шаг 2 – добавляем разметку веб-страницы

Теперь приступаем к редактированию файла. Первым делом необходимо добавить -веб-разметку – стандартный кусок кода, позволяющий браузерам распознавать контент, находящийся во внутренних тегах. Просто скопируйте и вставьте его:

1. 
   
   
2. 
   
   
3. 
   
   
4. 
   
   
5. 
   

   Это тег заголовка первого уровня для содержимого страницы

   
   
6. 
   
   Первый абзац
   
   
7. 
   
   Второй абзац
   
   
8. 
   
   Третий абзац и т. д.
   
   
9. 
    
   
10. 
     
    
11. 
    (это тело документа), всё, что выходит за их пределы выше и ниже, не будет отображаться на сайте.
    
     
    
    Шаг 3 – работаем со стилями CSS
    
    Допустим, вы добавили какой-то текст в параграфы, теперь нужно придать им стилистику – выбрать шрифты, фон, отступы, ширину области страницы и т. д. Это может выглядеть вот так:
    
    1. 
       body {
       
    2. 
       background: #F2F2F2;
       
    3. 
       max-width: 900px;
       
    4. 
       margin: 10px auto;
       
    5. 
       padding: 30px;
       
    6. 
       }
       
    7. 
        
       
    8. 
       h1{
       
    9. 
       color: #4C4C4C;
       
    10. 
        padding-bottom: 20px;
        
    11. 
        margin-bottom: 20px;
        
    12. 
        border-bottom: 2px solid #BEBEBE;
        
    13. 
        }
        
    14. 
        p{
        
    15. 
        font:italic;
        
    16. 
        }
        
    
    В примере вы видите цвет фона (background) и значение этого атрибута (#F2F2F2), ширину страницы (900 пикселей), отступы, цвет заголовка, отступы от основного текста и границ страницы (padding и margin), а также цветную границу нижней части сайта в 2 пикселя (border-bottom). Вся страница в сборе с разметкой, контентом и стилями будет выглядеть так:
    
    1. 
       
       
    2. 
       
       
    3. 
       
       
    4. 
       
       
    5. 
       

       Это тег заголовка первого уровня для содержимого страницы

       
       
    6. 
       
       Первый абзац
       
       
    7. 
       
       Второй абзац
       
       
    8. 
       
       Третий абзац и т. д.
       
       
    9. 
        
       
    10. 
         
        
    11. 
        
        
        Тело документа
        
        Содержит непосредственно информацию страницы: тексты, рисунки, таблицы
        
        =цвет фона документа TEXT=цвет текста >.
        
        3. Заголовки разных уровней
        
        Тегами _n>…._n> оформляют заключенный в них текст. Значения n меняются от 1 до 6, при этом текст выводится от более крупного к более мелкому. Теги _n>…._n> могут иметь атрибуты ALIGN=CENTER, LEFT, RIGHT.
        
        4. Простые списки
        

        <UL>……UL> - неупорядоченный (ненумерованный) список …… - упорядоченный (нумерованный) список Часть текста, которая будет оформляться как список, заключается в соответствующие теги, а каждый элемент списка помечается одиночным тегом

        Виды нумераций списков:

        
        5. Практичекое задание №2
        
        Форматирование текста по абзацам, цвет фона, заголовки разных уровней, списки.
        

        Урок №3

        
        1. Вставка графических изображений
        
        Всеми браузерами поддерживаются форматы .gif, .jpg. Эти форматы являются растровыми. GIF – поддерживается прозрачность и анимацияю, хорошо подходит для рисованных изображений. JPG – для полноцветных изображений, хорошо подходит для отсканированных изображений и фотографий, анимацию не поддерживает.
        
        Одиночный тег вставляет графические изображения в текстовый поток в любом месте:
        
        ’имя графического файла’>
        
        Необязательные атрибуты тега :
        

        ALT = альтернативный текст BORDER = толщина обрамляющей рамки в пикс., 0 нет рамки HEIGHT = высота изображения в пикселах или % WIDTH = ширина изображения в пикселах или %

        HSPACE = свободное пространство слева и справа от изображения в пикселах или % VSPACE =- свободное пространство сверху и снизу от изображения в пикселах или % ALIGN = left, right, middle выравнивание изображения

        
        Чтобы рисунок был по центру, можно использовать тег ……./
        
        2. Практическое задание №3
        
        Вставка и форматирование графических изображений. Самостятельное создание Web-страниц драматических театров.
        

        Урок №4

        
        1. Гиперссылки
        
        Связь с другими документами организуется тегами <A>….
        
        имя файла на который надо перейти” > текст гиперссылки .
        
        Рисунок так же можно сделать, как гиперссылку, написав:
        
        имя файла на который переходим'> =’имя графического файла’>
        
        2. Практическое задание №4
        
        Оформление списка театров на главной странице glavn.htm, как гиперссылки на соотвествующие Web-страницы театров.
        

        Урок №5

        
        1. Таблицы
        
        Используют не только для того, чтобы располагать данные в ячейках, сколько с целью позицирования фрагментов текста и изображений друг относительно друга.
        
        С помощью таблиц удобно создавать навигацию по сайту.
        …- строка.
        
        - ячейка в ряду.
        

        <TABLE>…TABLE> - вся таблица.

        …

        
        Пример таблицы из двух строк (рядов), содержащих по две ячейки:
        

        Текст ячейки 1, 1	Текст ячейки 1 2
        Текст ячейки 2, 1	Текст ячейки 2, 2

        
         
        первая строка
        
        вторая строка
        
        

        <TABLE> таблица
        текст ячейки 1,1	текст ячейки 1,2
        текст 2,1 ячейки	текст 2,2 ячейки