HTML и CSS. Список уроков.


Урок 01. Создание первой страницы.

Урок 02. Форматирование текста.

Урок 03. Макет страницы.

Урок 04. Добавление изображений.

Урок 05. Ссылки и меню.

Урок 06. Компоновка элементов.

Урок 07.

HTML и CSS. Урок 01. Создаем свою первую страницу.

Для начала обучения нам понадобится локальный сервер и редактор кода. Ссылки для их скачивания расположены на главной странице. После разархивации запустим наш OpenServer. Откроем вкладку "Мои сайты" - пока здесь расположена только предустановленная папка localhost. Путь к этой папке: OSPanel/domains/localhost

Именно в domains мы будем размещать все наши разрабатываемые проекты. Создадим в domains папку нашего первого сайта и назовем ее к примеру megaportal.

Далее запускаем наш редактор кода Brackets и создаем в нем по очереди два пустых файла index.html и style.css сохранив их в папку domains/megaportal.

index.html - это страница нашего проекта, а style.css - внешний файл стилей нашей страницы. Теперь наполним наш index.html содержанием. Для этого напечатаем восклицательный знак ! и нажмем Tab. Редактор сам выведет минимально необходимый HTML-код.

Заменим Document на название нашей страницы: Megaportal - мой первый сайт. Между тегами <body> </body> размещается контент нашей страницы. Добавим для примера следующее:  <h1>Megaportal - первый сайт</h1> <h3>Тема моего сайта</h3>

Сохраним наши изменения нажатием Ctrl+S и перезапустим сервер. Откроем  проект Megaportal. Нас можно поздравить с первым результатом:

В адресной строке браузера мы видим http://megaportal - это наш домен на локальном сервере. Главное конечно на странице - информация, но простой текст выглядит непрезентабельно. Для того, чтобы управлять нашими стилями подключим к нашей странице внешнюю таблицу стилей, которая и будет управлять нашим дизайном. Для этого в редакторе кода между тегами <head> и </head> напишем link и жмем Tab. Редактор выводит строчку: <link rel="stylesheet" href=" "> в которой между кавычками нужно указать путь к нашему файлу style.css относительно домена (папки megaportal).

Сохраним изменения и перейдем в редакторе на вкладку style.css и зададим желаемые параметры для нашего текста: цвет и размер шрифта.

Теперь запустим наш шедевр нажав на его название во вкладке Мои сайты. Результат нашей работы выглядит следующим образом:

Если вдруг что-то не получилось проверьте еще раз все написанное, наличие "фигурных скобок", "точки с запятой", регистр шрифта, путь к файлу и т.п. Чаще всего ошибки допускаются из-за невнимательности или банальной опечатки. И старайтесь писать код самостоятельно, конечно с помощью редактора, для его лучшего запоминанния и полной автономности в работе. Надеюсь, когда-нибудь Вы действительно создадите настоящий Мега-портал! ))


 Продолжение: HTML и CSS. Урок 2. 


 

 

 

Параметы