Компьютерный сайт - HardOK  

Вернуться   Компьютерный сайт - HardOK > Техническая поддержка > F.A.Q. > Обучение

Ответ
 
LinkBack Опции темы Опции просмотра
Старый 15.07.2013, 00:13   #1
Администратор
 
Аватар для NevesOma
 
Регистрация: 15.07.2012
Адрес: Чобручи
Сообщений: 1,031
Вы сказали Спасибо: 690
Поблагодарили 1,275 раз(а) в 735 сообщениях
NevesOma за этого человека можно гордитсяNevesOma за этого человека можно гордитсяNevesOma за этого человека можно гордитсяNevesOma за этого человека можно гордитсяNevesOma за этого человека можно гордитсяNevesOma за этого человека можно гордитсяNevesOma за этого человека можно гордитсяNevesOma за этого человека можно гордится
По умолчанию Создаем index.html и подключаем style.css



Интернет стремительно развивается, число сайтов растет в геометрической прогрессии, все больше людей хотят научиться создавать сайты, и стать веб -мастерами. Но в каждом деле нужен системный подход, начав создавать уроки CSS 3 и HTML5, мы забежали немножко вперед, забыв про ту часть людей которые только, только начали изучать SS 3 и HTML5. Поэтому сегодня у нас будет интересный урок| С чего начать?
Урок CSS 3 и HTML 5 с нуля
Для начала изучения CSS 3 и HTML5, нужно сделать следующее:
1) Создать новую папку, и переименовать ее например на Test, название значения не имеет.
2) Создать в паке Test »новая папка» и переименовать ее в Images
3) Создать в паке Test »новая папка» и переименовать ее в CSS
3) Создать два новых текстовых документа, это обычные файлы блокнота, с расширение «.txt».У вас должно получиться два файла: »Новый текстовый документ.txt» и «Новый текстовый документ(2)».txt
4) Переименовать Новый текстовый документ.txt в index.html
5) Переименовать Новый текстовый документ(2).txt в styles.css
6) Переместить styles.css в папку CSS
Теперь у нас есть все, что нужно для начала обучения CSS 3 и HTML5, кроме редактора, лично я использовал разные редакторы, но остановился на Dreamweaver CS5.5, но так как это платная программа, рекомендую еще отличную бесплатною программу Notepad++.
Итак начнем, нам у нас есть index.html, это главная страница, у нас есть папка CSS, с файлом styles.css, в этом файле будут стили css. Для начала нам нужно создать начальную структуру в index.html, для этого открываем его редактором (этот файл можно открыть любым текстовым редактором начиная с блокнота, но специальные редакторы подсвечивают теги что существенно облегчает работу) наберите в свой index.html мой код, можно без комментариев, они для понимания, код вы найдете ниже. Коментарии задаются в вот таком символе < !—комментарии —>(без пробела) писать их не обязательно, это как подсказки.
Код:
<!doctype html> <!--Тег DOCTYPE (что означает "объявление типа документа")- указывать браузеру,
как правильно отображать документ и по какой схеме -->	
<head>
<meta charset="UTF-8"><!--Кодировка сайта-->
<title>Уроки от WCDT</title><!--Название сайта, заголовок который отображается во вкладке в браузере-->
<link rel="stylesheet" type="text/css" href="css/styles.css"/><!--Эта строчка подключает стиль-->
</head>
<body>
<h1>Это моя первая html страница</h1>
</body>
</html>
Создаем index.html и подключаем style.css
Так как мы не просто создали html страницу, а еще и подключили к ней стиль, давайте что нибудь в нем напишем. Итак, откройте файл styles.css и скопируйте туда два стиля, которые приведены ниже, комментарии подсказки в комплекте, обратите внимание что CSS комментарии задаются иначе чем в html, вот так /*комментарий*/
Код:
body {background:#090;text-align:center;} /* тут задано цвет фона body, и выравнивание текста по центру*/
body h1 {color:#CC0000;} /*цвет фона body */
И так из этого Вы урока вы научились создавать html страницу в новом стандарте HTML 5, подключать к ней стиль. Также в папке Demo создана необходимая структура которая пригодиться Вам для дальнейшего освоения CSS 3 и HTML5. Каждому, новичку важно запомнить, что CSS стиль писать нужно только в styles.css, не стоит прописывать стиле в index.html. Ну что-ж, на этом Урок №1 по изучения CSS 3 и HTML5, можно считать завершенным!
Автор: Digital Nox
Работа над грамматическими ошибками: NevesOma
__________________
  • NevesOma (Максим)

NevesOma вне форума   Ответить с цитированием
Эти 2 пользователя(ей) сказали Спасибо NevesOma за это полезное сообщение:
ACORDGSM (19.07.2013), djon (15.07.2013)
Ответ

Метки
css3, hardok.ru, html уроки, уроки по web


Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 
Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Trackbacks are Вкл.
Pingbacks are Вкл.
Refbacks are Вкл.


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Учимся делать мигающий текст с помощью html тега blink NevesOma Web-программирование 3 17.08.2017 13:23
F.A.Q [html часть] NevesOma Инструкции 0 05.07.2013 04:18
Создаем самую простую рамку для фото StiVArk Уроки Photoshop 0 05.08.2010 23:50


Текущее время: 13:40. Часовой пояс GMT +3.


Все права защищены. Перевод сделал: zCаrot

↑ Наверх

HARDOK.RU