Уроки по HTML Создание твоей первой web страницы. Основы HTML. Часть 3

Автор Georgiy Dronov
Уроки по HTML Создание твоей первой web страницы. Основы HTML. Часть 3

Привет мой юный программист — это школа программирования айтигенио.

Меня зовут. Людмила и в этом видео мы продолжим работу над твоей веб страницей в прошлом видео уроки мы разобрались со вставкой из и оживили страницу добавив ссылки на источник и на две страницы содержимое которых тебе нужно было заполнить самостоятельно должно было получиться примерно так вот страница полезная программа, а вот полезные сайты сейчас мы сделаем твою web-страницу еще более похожий на настоящий сайт применив к ней верстку верстка веб страниц — это создание структуры HTML кода элементы web-страницы. Согласно макету.

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

А в так называемом подвале внизу размещают контактные данные или информацию об авторе сайта в наше время. Существует несколько методов создания верстки самые известные методы — это табличный метод и блочный метод верстки большинство сайтов построенный на блочной верстки, но и табличный метод всё ещё. Встречается так как работа с блоками требуется на не исчез мы. Познакомимся с блочным позже когда перейдем к изучению ses s.a. сейчас верстаем твою страничку с помощью таблиц табличный метод свертки не требуют ничего кроме знания HTML для начала. Открой главную страницу своего сайта с помощью текстового редактора у меня — это страна. Яндекс теперь за комментируем всё содержимое тега поди — это делается с помощью какого специального символа состоящего из треугольной скобки восклицательного знака и 2 дефисов всё, что стоит после этого знака становится нечитаемым то есть невидимым для браузера таким образом разработчики оставляют для себя и друг для друга комментарии в коде, но мы делаем. Это для того чтобы временно. Убрать всё содержимое страницы ничего при этом не удаляя обязательно надо обозначить конец комментарии вписав место где должен кончаться комментарий то есть где должно кончаться нечитаемая область 2 дефиса и закрывающие треугольную скобку сейчас. Открой страницу в браузере и убедись, что её содержимое исчезла теперь приступим к созданию самой таблицы таблица обозначается в HTML table он является парным то есть его обязательно необходимо закрыть, но сейчас таблица ещё не появится если мы откроем страницу в браузере так как мы не сделали её разметку любая таблица состоит из строк и столбцов на их пересечения находятся ячейки для обозначения срок используется тег TR, а для этих строк на ячейки с помощью столбцов txt вашей таблицы должно быть три строки создадим одну строку с помощью цифр и скопируй мне её три раза теперь разделим строки на ячейки с помощью столбцов в нашей таблицы должно быть два столбца. Это означает, что внутри каждого TR нужно дважды прописать открывающий и закрывающий тег TD для того чтобы не запутаться в структуре таблицы рекомендую делать отступы как у меня сохраним и заглянем в браузер таблица по-прежнему не появилось. Дело в том, что она есть на странице, но я граница невидимы для создания видимых границ установить для таблиц атрибут Border означающее толщину границ я установлю Border равный двум то есть границы и толщиной 2 пикселя на странице у нас появилась. Вот такая маленькая табличка если мы начнём её заполнять содержимым то я чеки будут автоматически увеличиваться, а таблица будет растягиваться, но — это не совсем то, что нам нужно мы должны задать величину таблицы независимую от контента. Воспользуйся для этого уже изученные ранее атрибутами Head David высота и ширина сначала зададим ширину всей таблицы пропишем Vitz в теге table таблица должна занимать по ширине всю область браузера поэтому зададим ширину 100% вот, что получилось высоту таблицы в процентах задавать. К сожалению нельзя. Поэтому будем регулировать её с помощью указания фиксированной высоты строк первая строка шапка сайта занимает приблизительно 100 пикселей по высоте пропишем для неё height равный 100 вторая строка основное содержимое нужно занимать большую часть места в окне браузера задать имя и высоту. Ну приблизительно 600 пикселей подвал будет не очень большим. Я ухожу для него высоту 70 пикселей, но ты можешь поэкспериментировать теперь отредактируй в ширину столбца в котором будет находиться меню меню располагается во второй строке в первом столбце находим в коде вторую строку таблицы и ширину первого столбца я установлю Vitz 200 пикселей в целом таблица готова но. Обрати внимание она всё ещё отличается от макета в макете шапка и подвал — это сплошные ячейки не разбиты на две ячейки, но — это не проблема так как в HTML есть возможность объединить несколько ячеек расположенных рядом в одну сейчас. Мы — это сделаем в первую очередь нужно избавиться от этой 2 ячейки мы её просто удалим и Skoda и. Посмотрим, что получилось и. Чайка исчезла и на её месте осталась пустое пространство. Теперь нужно всего лишь растянуть первую всю таблицу конечно было бы. Логично для неё атрибут Vitz со значением 100%, но если мы так сделаем кто поедет вся структура таблицы вот так так происходит потому, что все ячейки таблицы в HTML взаимосвязанной и меня и ширину какой-либо ячейки мы меняем автоматически ширину всего столбца в котором она находится для случая с объединением ячеек из другой атрибут colspan он указывает сколько столбцов по ширине будет занимать ячейка. Нам необходимо растянуть эту и на два столбца поэтому kovtun укажем равный двум вот, что получилось тоже самое повторим для подвала удалим лишнюю ячейку Ира.

0 комментариев
0

Читайте также