Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.
В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.
Примечание: Найти все мануалы этой серии можно по тегу HTML-practice.
Этот мануал познакомит вас с базовым HTML-документом и научит просматривать его исходный код в браузере.
Для разметки документов HTML использует инструкции, которые сообщают браузеру, как отображать и интерпретировать содержимое документа. К примеру, HTML может сообщить браузеру, какое текстовое содержимое следует интерпретировать как заголовок, а какое – как абзацы. HTML также используется для добавления изображений и позволяет присваивать ссылки тексту и изображениям. Эти инструкции передаются через теги HTML, которые записываются в таком формате:
Как полностью скачать сайт с CSS, JavaScript и картинками
Многие (хотя и не все) теги включают открывающий и закрывающий компонент, между ними находится контент, который они должны изменить.
Чтобы понять, как используются эти теги, давайте рассмотрим фрагмент HTML-кода. Приведенный ниже код HTML показывает, как теги структурируют текст и добавляют ссылки и изображения. Не беспокойтесь, если вы не знаете всех использованных ниже тегов – мы подробно изучим их в следующем руководстве этой серии.
Sample HTML
This code is an example of how HTML is written.
It uses HTML tags to structure the text.
It uses HTML to add a link.
And it also uses HTML to add an image:
В браузере этот документ рендерится так:
Sample HTML
This code is an example of how HTML is written.
It uses HTML tags to structure the text.
It uses HTML to add a link.
And it also uses HTML to add an image:
Теперь вы, как код HTML отображается в браузере. Далее мы расскажем, как просмотреть исходный код любой веб-страницы с помощью браузера.
Просмотр исходного кода HTML-страницы
Почти любая веб-страница, с которой вы сталкиваетесь в сети, использует HTML для структурирования и отображения контента. Вы можете проверить исходный код любой веб-страницы с помощью веб-браузера (будь то Firefox или Chrome). В Firefox откройте меню и выберите Tools, а затем кликните Web Developer/Page Source.
Для просмотра исходного кода веб-страницы в Firefox также можно использовать сочетание клавиш Command-U.
В Chrome все устроено очень похоже. В верхнем меню выберите View и нажмите Developer/View Source. Также можно использовать сочетание клавиш Option-Command-U.
Давайте попробуем изучить исходный код тестового веб-сайта, который мы создадим в этой серии. Вы должны получить страницу с гораздо большим количеством HTML-тегов, чем вы видели в примере выше. Не пугайтесь – к концу этой серии вы будете понимать, как интерпретировать исходный код HTML и как использовать HTML для создания и настройки собственных веб-сайтов.
Как посмотреть исходный HTML-код страницы — Бесплатный курс HTML
Примечание: Как упоминалось выше, с помощью инструментов из веб-браузера Firefox или Chrome вы можете просмотреть исходный код любой веб-страницы. Чтобы потренироваться и получить представление о базовом коде, который структурирует веб-документы, попробуйте изучить код нескольких ваших любимых веб-сайтов. Скорее всего, исходный код этих сайтов будет содержать несколько языков, а не только HTML, но это поможет вам подготовиться к изучению дополнительных языков и фреймворков.
Теперь у вас есть общее представление о формате HTML-документа и вы знаете, как проверять исходный HTML-код с помощью браузера. Чтобы лучше понять, как работает HTML, мы рассмотрим его ключевые компоненты. В следующем руководстве мы больше расскажем об элементах HTML, строительных блоках, которые используются для создания HTML-документов.
Источник: www.8host.com
13. Исходный код веб-страницы
Перед обсуждением темы, приведем традиционную структуру веб-страницы.
Типичная страница на HTML
Исходный код страницы традиционно содержит определенные теги. Они организуют структуру веб-страницы. О них мы уже ранее говорили, поэтому повторим. Страница начинается с тега , который объявляет тип документа.
Далее можно увидеть контейнер за пределами которого может быть только . Внутри тега указываются заголовок страницы, мета-теги, подключаемые стили и скрипты, то есть то, что для пользователя является «невидимым» (кроме заголовка, отображаемого во вкладке браузера). Далее можно увидеть тег , в котором размещаются все элементы сайта, видимые пользователем.
Поначалу может показаться что нет необходимости соблюдать структуру, ведь вы же разработчик, а следовательно, в праве решать что и как вам делать. Но когда сайт будет запущен, поисковые системы не дадут вам так вольно относится к структуре сайта. Неправильно сверстанные страницы будут ниже ранжироваться в поисковой выдаче, а это приведет к меньшему количеству посещений сайта из поисковых систем и меньшей популярности сайта в целом. Ранжирование – это сортировка сайтов в поисковой выдаче.
Источник: codebra.ru
Готовый код сайта Html + CSS
Ранее я уже дал вам Код сайта на чистом HTML, теперь же применим CSS и напишем блочный шаблон сайта.
В этой статье я дам вам не только код блочного шаблона сайта, а и подробно расскажу, и покажу, что и как в нём можно изменять, и куда складывать файлы.
Итак, такой вот сайт.
Тему грузоперевозок я взял для примера потому, что чаще всего именно люди работающие в этой сфере, обращаются ко мне за помощью.
Но Вы, прочитав статью, сможете сделать всё по своей тематике, и со своей конструкцией каркаса сайта.
Времени это займёт столько, сколько потребуется на внимательное прочтение статьи, и материалов по ссылкам, и последовательное выполнение моих инструкций.
< html lang color: #008080;»>ru «>
< head >
< meta charset color: #008080;»>utf-8 » />
< title >Код блочного сайта< /title >
< style >
body background : #c0c0c0 ; /* Меняется фон экрана, выбирается здесь */
>
#wrapper < /* Оболочка страницы сайта */
width : 900px ; /* Меняется ширина страницы */
margin : 0 auto ;
background : #f2e8c9 ; /* Меняется задний фон страницы */
>
/* Сайдбар (колонка справа) */
#sidebar < /* Блок сайдбара */
background-color : #ffffff; /* Фон блока */
width : 180px; /* Ширина блока */
padding : 10px; /* Отступ текста от краёв */
float : right; /* Размещаем блок справа от других элементов, наплывание или обтекание справа). Если делать сайдбар слева, то значение right меняем на left */
border-radius : 5px ; /* Закругляем углы блока */
box-shadow : rgba(0,0,0,0.5) 0px 1px 3px ; /* Задаём блоку тень */
>
.marcer < /* Галочки маркеры меню */
float : left ; /* Размещаем слева от текста */
margin : 5px 5px 0 0 ; /* Двигаются вверх-вправо-вниз-влево */
>
#content < /* Блок контента */
margin-bottom : 5px ; /* Отступ блока статьи от блока подвала */
width : 676px ; /* Ширина статьи */
padding : 10px ; /* Отступ текста от краёв блока */
background : #ffffff ; /* Фон статьи */
border-radius : 5px ;
box-shadow : rgba(0,0,0,0.5) 0px 1px 3px ;
>
.left < /* Картинка в тексте слева */
float : left ;
margin : 30px 7px 7px 7px ;
>
.right < /* Картинка в тексте справа */
float : right ;
margin : 7px 0 7px 7px ;
>
/* Подвал */
#footer < /* Блок подвала */
height:80px; /* Высота блока подвала */
background-color : #ffffff ; /* Фон блока подвала */
margin-bottom : 10px ; /* Отступ снизу */
border-radius : 5px ; /* Закруглённые углы */
box-shadow : rgba(0,0,0,0.5) 0px 1px 3px ; /* Тень блока */
>
.clear < /* Запрет наплывания. Устанавливается для того, чтобы блок контента, при заполнении текстом и изображениями не наплывал на подвал */
clear : both ;
>
.fon < /* Номер телефона */
float : left ; /* Разрешаем другим элементам обтекать абзац справа */
margin : 20px 0 0 20px ;
>
.fax < /* Номер факса */
float : left ;
margin : 20px 0 0 60px ;
>
.mail < /* Адрес E-mail */
float : left ;
margin : 20px 0 0 60px ;
>
< /style >
< /head >
< body >
< div id color: #008080;»>wrapper «>
< div id color: #008080;»>header «>
< h1 >Грузоперевозки< /h1 >
< p c lass color: #008080;»>nomer «>234-49-50 < br >+7 900 650 33 45< /p >
< img src color: #008080;»>http://trueimages.ru/img/cf/26/9116df15.png «>
< /div >
< div id color: #008080;»>sidebar «>
< h3 >На нашем сайте< /h3 >
< p >< img class color: #008080;»>marcer » src color: #008080;»>http://trueimages.ru/img/99/91/dea39f15.png » width color: #008080;»>10 » height color: #008080;»>10 «>Наши сотрудники< /p >
< p >marcer » src color: #008080;»>http://trueimages.ru/img/99/91/dea39f15.png » width color: #008080;»>10 » height color: #008080;»>10 «>Наша техника< /p >
< p >< img class color: #008080;»>marcer » src color: #008080;»>http://trueimages.ru/img/99/91/dea39f15.png » width color: #008080;»>10 » height color: #008080;»>10 «>Прайс
< hr width color: #008080;»>50 » color color: #008080;»>#037FFC » size color: #008080;»>5 «>
< h3 >Другая информация< /h3 >
< /div >
< div id color: #008080;»>content «>
< img class color: #008080;»>left » src color: #008080;»>http://trueimages.ru/img/81/90/b1718f15.png «>
< h3 >Наша работа< /h3 >
< p >Здравствуйте уважаемые будущие веб-мастера!< /p >
< p >Мне 55 лет и я рад приветствовать Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.
Почему я решил его сделать?< /p >
< p >За те 3 месяца, пока
разбирался в сайтостроении и создавал этот ресурс
обнаружилось, что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися
и не обращают на них внимание.< /p >
< p >А мне, учитывая
возраст и «опыт», было не просто понять как раз эти
нюансы, они отнимали больше всего времени. И я решил
написать свой материал, так что-бы другим было легче
сориентироваться в потоке новой информации.< /p >
< img class color: #008080;»>right » src color: #008080;»>http://trueimages.ru/img/0d/64/07a18f15.png «>
Это код статичного сайта, а это значит, что на экранах с разным расширением, он будет оставаться в неизменных размерах.
То есть на мобилах у него появится полоса горизонтальной прокрутки, которой придётся пользоваться, чтоб просмотреть сайт целиком.
Что переделать в этом коде, чтоб сделать сайт удобным для просмотра на мобильных экранах можно прочитать в статьях Резиновый сайт или Адаптивный сайт.
А теперь вернёмся к нашему примеру.
Прежде чем начать работать с кодом, нужно создать место где будет располагаться сайт до вывода его в интернет.
Как создать директорию сайта смотрите в статье Создание директории сайта
Для редактирования этого кода, потребуется HTML редактор. У кого он есть, очень хорошо, у кого нет, предлагаю установить Notepad++.
Как начать в нём работу, то есть создать файл, прочитайте здесь.
Когда редактор будет установлен, откройте его, скопируйте из представленного выше кода строки 1 — 6, и вставьте в поле редактора, а затем строки 118 — 153, и так же вставьте в редактор.
Таким образом мы выбрали HTML часть кода, из которой создадим HTML файл. Удалите мою нумерацию строк, создайте файл, назовите его index.html, и сохраните в директорию сайта.
Директория должна приобрести такой вид:
Следующим шагом создаём файл style.css, в котором будет расположена таблица стилей.
Вот тут внимание! Файл style.css, в дальнейшем, будет подключаться ко всем страницам сайта, поэтому в нём нужно собрать стили, формирующие основу страницы.
А это все стили из выше приведённого кода, кроме селекторов .left и .right , относящихся непосредственно к тексту статьи.
В дальнейшем, если Вам захочется внести какие-то изменения в конструкцию сайта, достаточно будет внести их в файл style.css, и они отобразятся на всех страницах.
Итак, в директории сайта создаём ещё одну папку, и называем её css.
Затем возвращаемся в редактор, открываем новый документ (первая иконка панели), копируем и вставляем в него строки 8 — 80 и 90 — 116.
Пропускаем только стили оформляющие картинки в тексте, так как они предназначены только для одной страницы.
Убираем мою нумерацию, и сохраняем этот новый документ во вновь созданную папку css, под названием style.css.
Далее откроем файл index.html, и подключим к нему таблицу стилей, то есть файл style.css.
Делается это следующим образом: в теге , можно между тегами и , вставляется тег , с атрибутами определяющими местоположение и назначение css.
< link href color: #008080;»>css/style.css » type color: #008080;»>text/css » rel color: #008080;»>stylesheet «>
После тега , подключим стили, оформляющие картинки расположенные в тексте статьи. (строки 81 — 88). Убираем мою нумерацию и комментарии, так как в файле html комментарии css не работают, и даже наоборот, могут всё испортить.
< style «>
.left float : left ;
margin : 30px 7px 7px 7px ;
>
.right float : right ;
margin : 7px 0 7px 7px ;
>
< /style >
После каждой манипуляции с кодом в редакторе, не забывайте сохранить изменения (третья иконка слева). При этом иконка файла должна из красной стать синей.
Вид в редакторе:
Далее проходим в меню «Запуск», выбираем свой браузер, и посмотрим, что он нам покажет. Если не сделали ошибок при копировании, то в браузере отобразится картинка, представленная в начале статьи.
Следующим шагом разберёмся с изображениями. У меня картинки загружены через сервис trueimages, только для того, чтоб страница открылась у Вас в браузере.
Вам же нужны будут свои изображения, и их нужно сделать, или найти в интернете.
Как сделать картинку для шапки сайта в Paint можно посмотреть в одноимённой статье. Если-же у Вас есть фотошоп, то все изображения лучше делать в нём.
Все сделанные, или найденные изображения, нужно поместить в папку images директории сайта.
Первым делом поменяем шапку сайта. Для этого в файле index.html удалим тег c моей картинкой (строка 124)
Затем в файле style.css удалим селектор img.
Далее, в селекторе #header прописываем уже Вашу картинку
background-image : url(../images/schapka.png) ;
В редакторе это будет смотреться так
Двоеточие в начале адреса изображения ставиться тогда, когда селектор находится в в отдельном css файле. Если стили подключены в html файле, двоеточие в начале адреса не ставится.
Обратите внимание, что размер картинки не должен превышать размер блока header. Определяется он так: щёлкните по файлу картинки правой клавишей, в появившемся меню выбираете «Свойства», и затем, «Подробно», там и будут показаны размеры.
Теперь, если пройти в меню «Запуск», и открыть index.html, то откроется страница с Вашим изображением в шапке сайта.
Меняем остальные картинки (строки 128,129,130,135,141) В отличие от предыдущей, в них нужно изменить только адреса. Удалить адреса моих изображений, и вставить адреса Ваших.
После чего они приобретут примерно такой вид. Название картинки у меня i2.png, а у Вас будет своё.
< p >< img src color: #008080;»>images/i2.png «>Наши сотрудники < /p >
Ну вот, осталось написать свои заголовки, оформить и подвинуть их туда куда Вам нужно(как это сделать сказано в комментариях к коду), написать свой текст, и главная страница Вашего сайта готова!
Если Вам захочется изменить положение сайдбара, или сделать два сайдбара, то код таких шаблонов представлен в статье Каркас сайта. Просмотрев их, можно сделать небольшие изменения в коде, представленном в этой статье, и получить желаемый результат.
Итак главная страница сайта готова, можно приступать к созданию рубрик и страниц. Я покажу, как создаётся одна рубрика, и в ней одна страница, а уж остальные Вы, точно так же, сделаете самостоятельно.
В директории сайта у нас есть папка content. Открываем её и создаём ещё одну папку — rubrica1(у Вас конечно будет своё название). В этой папке создаём ещё две папки — css и images.
В папку css помещаем файл style.css, а в папку images, во первых — основные изображения, которые должны быть на каждой странице (в моём случае это шапка сайта и маркеры меню), и во вторых, Вы поместите туда все картинки, которыми будете оформлять статьи этой рубрики.
Теперь можно создать страницу или статью. Открываем в Notepad++ файл index.html, копируем его, затем открываем «Новый документ», и вставляем в него скопированный файл.
Убираем из этого файла текст, вместе с расположенными в нём изображениями, и глобальные стили. Остаётся чистая страница Вашего сайта.
Можно заполнить страницу текстом, и украсить его изображениями. Точно так-же создаются все статьи этой рубрики. Затем делается следующая рубрика и так далее.
Лучше заранее прикинуть, какие рубрики будут в Вашем сайте, создать их, а потом заполнять статьями. Проще потом будет делать навигацию.
Вот мы и подошли к самой, по моему, трудоемкой и нудной фазе создания сайта — навигации. Или меню.
Почему трудоёмкая? Потому, что на каждой странице, и в каждой рубрике сайта, должна быть ссылка на все остальные страницы и рубрики, или что-то вроде этого. Зависит от того, какую навигацию для сайта Вы примените.
Можно с каждой страницы на все остальные, можно меню «Рубрики», а уж из рубрик — меню по страницам. А если этих страниц несколько сотен?
На примере я покажу, как делается меню, но делать его нужно после того, как сайт будет выложен в интернет, так как адреса страниц на хостинге будут другими, нежели адреса страниц сайта, расположенного на компьютере.
Итак, меню делается в общем-то просто. Нужно, лишь, в строку меню, вставить ссылку на другую страницу
Так на каждой странице, после чего наше меню станет активным.
Ну вот вроде бы, в общем, всё. Осталось выложить наше детище в интернет. Как это сделать читайте в статье Шаблон сайта на чистом HTML.
В качестве хостинг провайдера очень рекомендую Бегет
Готовый код различных наворотов для вашего сайта вы можете найти на странице Бесплатные скрипты и CSS эффекты для сайта
Желаю творческих успехов.
Неужели не осталось вопросов? Спросить
Перемена
Учитель поймал в школе ученика, игравшего в карты, и отодрал его за уши.
— Ты знаешь, за что я тебя наказал? — спросил учитель.
— Знаю. Я неправильно пошёл королём.
А ну-ка, что там ещё интересненького
Источник: starper55plys.ru