Подготовка программного обеспечения
1. Создайте на рабочем столе папку с произвольным названием на английском языке. Например: my_best_site2. Запустите Sublime Text.
3. Сохраните пустой документ в созданную вами папку через меню команд: File-->Save As... под именем index.html
4. Откройте сохранённый вами файл index.html с помощью браузера Google Chrome
5. Используя комбинации клавиш Win -> (виндовс и стрелка направо) Win <- (виндовс и стрелка влево), расположите окно Sublime Text в правой части рабочего стола, а окно Google Chrome в левой. (как на рисунке)
Работа с выпадающим списком Sublime Text
Редактор Sublime Text создан для быстрой работы с программным кодом и часто предлагает быструю вставку готового куска кода как только пользователь начинает его вводить.
1. В английской раскладке начните вводить в Sublime следующий код: <html
в самом начале ввода, редактор предложит варианты кусков кода в выпадающем списке:
Вам необходимо выбрать первый вариант - HTML с помощью мыши либо переместить селектор стрелками на клавиатуре и нажать Enter.
В редакторе появится структура HTML документа (типа скелет будущего сайта):
Код, заключённый в скобки < > называется тегом (тег).
Различают открытый тег (заключённый код лишь в скобки, например: <html> <body> <head>) и закрытый тег (заключённый в скобки с символом слэш, например: </html> </body> </head>).
Весь код и пустое пространство попадающее между открытым и закрытым тегом называется секцией.
На скрине расписал вам какой тег за что отвечает:
Меняем название веб-станицы
Название веб-страниц, обычно, размещается на закладке браузера. Для её изменения, найдите секцию <title> </title> и между открытым и закрытым тегом впишите название страницы. Например:
После чего сохраните документ нажатием клавиш CTR+S (или через меню File-->Save) и обновите открытую страницу в Google Chrome.
Если боги интернета сегодня на вашей стороне и вы всё делали верно, не пропуская заданий, то на открытой вкладке браузера появится название вашей веб-страницы:
Заголовки в HTML
Заголовки прописываем в секции body ( между тегами <body> и </body>).
Всего в HTML 6 уровней заголовков, они отличаются лишь размером букв.
Тег для заголовка 1-го уровня - <h1> </h1>
Тег для заголовка 2-го уровня - <h2> </h2>
Тег для заголовка 3-го уровня - <h3> </h3>
Тег для заголовка 4-го уровня - <h4> </h4>
Тег для заголовка 5-го уровня - <h5> </h5>
Тег для заголовка 6-го уровня - <h6> </h6>
Сам текст для заголовка вписывается между открытым и закрытым тегом:
Сохраните документ нажатием клавиш CTR+S (или через меню File-->Save) и обновите открытую страницу в Google Chrome.
В браузере вы должны видеть примерно следущее:
Выравнивание и цвет заголовков
align="left" – выравнивание по левой стороне.
align="right" – по правой стороне.
align="center" – определяет центрирование.
style="color: Red" – определяет цвет текста (цвет прописываем с большой буквы на английском).
Атрибуты текста прописываются в первом теге заголовка. Например:
Атрибуты текста прописываются в первом теге заголовка. Например:
Гиперссылки на интернет-ресурсы
Гиперссылка прописывается тегом <a> </a>
Между тегами прописывается сам текст гиперссылки, а в открытом теге через атрибут href=" " пишут URL. Например:
Гиперссылка на собственную веб-страницу
1. Создайте новый документ в Sublime Text.
2. Сохраните его в папку с вашим сайтом с именем: link1.html
3. Создайте на главной странице вашего сайта гиперссылку как в примере с Ютубом, но вместо https://www.youtube.com впишите название вашей второй страницы - link1.html
2. Сохраните его в папку с вашим сайтом с именем: link1.html
3. Создайте на главной странице вашего сайта гиперссылку как в примере с Ютубом, но вместо https://www.youtube.com впишите название вашей второй страницы - link1.html
Вставка картинок на страницу
1. Скопируйте картинку в папку с вашим сайтом.
2. Начните писать тег <img
3. Выберите из списка тег <img
4. Впишите в кавычки название вашей картинки с её форматом. Нпример <img src="kotiki.png">
5. Если нужно прописать выравнивание картинки добавьте параметр align="center" (или align="left" или align="right"). Например: <img align="left" src="kotiki.png">
6. Если нужно прописать размеры картинки, воспользуйтесь параметрами height="120" (высота) или width="400" (ширина) размеры задаются числами в пикселях.
Фон страницы
Фоновое изображение прописывается в конце открытого тега <body>.
Картинка паттерна для фона сохраняется в папке с файлами вашего сайта.
Например:
<body style="background-image:url(kartinka.jpg)">
Картинка паттерна для фона сохраняется в папке с файлами вашего сайта.
Например:
<body style="background-image:url(kartinka.jpg)">
Бегущая стока
<marquee behavior="alternate" direction="right">Тут, кАроч текст</marquee>
0 коммент.:
Отправить комментарий