Большинство вещей в сети ничем не отличаются от аналогичных вещей в вашем домашнем компьютере: такие же файлы, хранящиеся в таких же подкаталогах.
HTML файлы – это обычные текстовые файлы. Таким образом, чтобы начать писать на языке HTML, вам необходим всего лишь обычный текстовый редактор.
Если вы используете операционную систему MS Windows, то подойдет стандартный «Блокнот» (Notepad). Если же на вашем компьютере установлена другая операционная система, то сгодится аналогичный редактор текстов, например, Pico (Linux) или TextEdit (Mac).
Запустите свой текстовый редактор и, в открывшемся окне, введите:
Это моя первая веб-страница
Теперь создайте на любом диске своего компьютера (например, на диске C) папку с названием «html» и сохраните свой файл как «myfirstpage.html». Очень важно, чтобы у файла было расширение «.html»; некоторые текстовые редакторы, такие как «Блокнот», по умолчанию сохраняют файл с расширением «. txt».
Чтобы просматривать HTML файлы, они не обязательно должны быть размещены в сети Интернет. Откройте программу браузер, например, Firefox или Internet Explorer, и в адресной строке, где вы обычно вводите адрес сайтов, введите адрес только что созданного вами файла (например, «c:\html\myfirstpage.html») и нажмите ввод. Альтернативно вы можете войти в меню браузера «Файл», выбрать пункт «Открыть» и найти нужный файл.
И вот она! Ваша первая веб-страница!
Ранее было сказано, что следует использовать простой текстовый редактор. Тем не менее, возможно, вы захотите воспользоваться специальной программой для создания сайтов вроде Dreamweaver или Frontpage. Однако в этом случае следует быть очень осторожным, особенно начинающим веб-мастерам, так как подобные специализированные программы очень часто стремятся вставлять ненужный или нестандартный код, чтобы вам, так сказать, «помочь».
Если вы серьезно намерены изучать HTML, то подобные программы могут вам только навредить, так как они никогда не дадут вам такого полного контроля над кодом веб-страницы, как ручное кодирование.
Структура HTML документа Вверх Учебник HTML для начинающих
Учебник HTML. Основы HTML
Этот учебник целиком и полностью посвящён языку HTML, без знаний которого не обойтись в создании какой либо веб-страницы. HTML язык — это основа, база которую просто таки необходимо знать любому начинающему веб-мастеру! Этот язык, сам по себе (в чистом виде), достаточно простой, думаю его с легкостью может освоить любой «продвинутый» шестиклассник.. в тоже время он позволяет самостоятельно создавать полноценные страницы и сайты.
Рассчитан этот HTML учебник для начинающих «с нуля» людей, которые только только решили освоить веб-ремесло, поэтому старался писать его как можно более развернуто и что называется «доходчиво», в тоже время стараясь охватить весь курс до мелочей, так что может быть и опытный веб-мастер найдет в нём для себя что-то новое или будет использовать его в качестве «шпаргалки», изложенной в прилагаемом справочнике тегов. Где нет «воды» и нудноватого для уже опытного человека «разжёвывания» материала.
Ну и сразу к делу.. начнем с классики..
Откройте блокнот, да да, тот самый блокнот.. Пуск> Стандартные> Блокнот и напишите в нем следующий текст:
<html> <head> <title>Моя первая страничка</title> </head> <body> Привет мир!!! <br> Меня зовут (здесь впишите Ваше имя), это моя первая страничка! </body> </html>
Далее, сохраните этот текст как html документ, название придумайте сами.. главное чтобы расширение было html
Повторюсь, чтобы не было казусов.. в блокноте кликаем по меню «Файл», выбираем «Сохранить как..» в строке «Имя файла» пишем: index.html, просто по умолчанию блокнот предлагает сохранить файл с расширением *.txt, а нам нужно расширение *. html
Далее открываем этот файл при помощи Вашего браузера. . ну к примеру того же Internet Explorerа (правой кнопкой по нашему файлу.. «Открыть с помощью..» Internet Explorer)
Поздравляю, Вы написали свою первую страничку!!!
Если в Вашей душе загорелась искорка, проснулась тяга к знаниям и творчеству, предлагаю планомерно ознакомится с главами этого учебника. В них на доступном языке с множеством примеров я постараюсь объяснить то, что мы только что написали, а так же как сделать этот документ более привлекательным, вставить в него графику, таблицы, прописать ссылки.. в общем, сделать его полноценным сайтом, заслуживающим места во всемирной паутине.
Основы HTML для начинающих
Данная статья не претендует быть исчерпывающим руководством по языку разметки документов HTML. В ней описываются основы HTML — базовые принципы, понятия и определения данной технологии, освоив которые, можно без труда двигаться дальше в изучении HTML кодинга.
Поделиться
Твитнуть
Поделиться
Класснуть
Запинить
Для изучения урока, скачайте архив с необходимыми файлами.
HTML — это язык разметки документов. Правильное произношение — Эйч Ти Эм Эль.
Вы, наверняка, работали когда-нибудь в редакторе документов Word или подобных офисных приложениях? Наверное вы знаете, что данный вид редакторов имеет богатые возможности для редактирования текста, расположения элементов, вставки картинок и т. д.
Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.
Ключевое слово здесь — документ. То есть, мы создаем, редактируем и просматриваем документ в какой-то программе, в данном случае — в офисном редакторе. Если открыть такой документ в простом текстовом редакторе, например, в Блокноте, то мы увидим множество странных символов и знаков. Эта каша из символов непонятна человечеству, но понятна компьютерам. Благодаря этому внутреннему языку, документ Word приобретает определенную структуру и вид в самом редакторе, а документ предстает перед нами во всей своей красе с отформатированным текстом и картинками на своем месте.
HTML — это язык разметки документов для браузера. Word’ом здесь выступает браузер, а документом — HTML страничка. Это самая основа технологии HTML, понимание которой необходимо для того, чтобы не путать язык разметки веб документов с языками программирования. Название говорит за себя — с помощью HTML мы размечаем, где на странице будет показан элемент, картинка или текст, и в каком порядке они будут следовать друг за другом.
Да, простой набор и форматирование текста в офисных приложениях не имеют ни чего общего с программированием. Но наблюдательный читатель заметит важную деталь — в текстовом процессоре мы набираем, редактируем и форматируем текст и картинки с помощью визуальных кнопочек и меню, но почему же HTML код пишется вручную? Зачем изучать так много технических деталей написания разметки для документа?
На самом деле, существует масса редакторов, с помощью которых можно создавать и редактировать HTML странички по аналогии с Word. То есть исходный HTML код для нас скрыт и в него мы не лезем.
Этакий Word для HTML. Такие визуальные редакторы называются:
WYSIWYG редакторы — What You See Is What You Get. То есть, если перевести на русский: что видим, то и получаем.
Я их называю «вузивуги». Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно — не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.
Но, как говорится, ни чего просто так не бывает. А если конкретнее — у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:
Грамотный HTML код положительно влияет на поисковую оптимизацию, скорость сканирования поисковым роботом сайта. Сгенерированные вузивугой килобайты кода здесь не приемлемы и даже вредны;
HTML код, сгенерированный WYSIWYG редактором имеет множество семантических ошибок. То есть, теги, генерируемые таким редактором используются не по назначению, там где нужно использовать, например, списки <ul>, редактор сгенерирует нам другой, ненужный нам тег. Зависит, конечно, от редактора, но здесь имеются ввиду комплексные решения для создания сайтов, а не простого редактирования текста в текстовой области средствами WYSIWYG.
Генерируется много лишних тегов и структура документа получается раздутой. Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру — от каждого действия остается след в исходном HTML коде. Редактор — это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
Как правило, редакторы для визуального оформления HTML кода, быстро устаревают. А ввиду отсутствия интереса со стороны профессионалов — вообще лишаются поддержки и останавливаются в развитии. А HTML развивается. Все развивается, кроме вузивуги. Соответственно, они не могут генерировать правильный и современный код, в котором были бы задействованы новые фишки и решения.
Поддерживать такие проекты и развивать — кара небесная. Об использовании паттернов и повторном использовании кода речи вообще быть не может.
Так что, HTML будем писать только ручками. Адекватных инструментов для визуального редактирования HTML еще не придумали, да и врядли они появятся. Язык разметки HTML прост в освоении и понимании, а средств автоматизации написания HTML кода множество, но об этом в других уроках.
Повозившись немного с WYSIWYG редактором, юные HTML-гуру оставляют это бесперспективное занятие и двигаются дальше.
Структура документа HTML
Рекомендую для занятий скачать и установить редактор Sublime Text. Крайне не рекомендую использовать для HTML верстки встроенный в Windows «Блокнот», если вы не хотите сломать себе психику на ранних порах изучения HTML.
Мы решили, что код HTML документа будем писать вручную, то есть верстать. HTML Верстка — процесс создания HTML документа. В простонародье и осведомленных кругах — просто верстка. Любой документ имеет структуру и определенные правила построения. Из каких же элементов состоит код, какая структура у HTML?
Давайте создадим на компьютере первоначальный шаблон — файл index.html, откроем с помощью редактора и вставим в него следующий код:
Обратите внимание, документы HTML имеют расширение .html.
Итак, по порядку из примера.
<!doctype html> — тип документа (доктайп)
<!doctype html>
Данная конструкция всегда указывается в начале документа для правильного «понимания» браузером того, какая версия HTML используется при построении документа.
Ввиду того, что HTML постоянно развивается, он имеет несколько версий, как и любой программный продукт. Текущая версия HTML — пятая и приведенный в примере доктайп является актуальным.
В принципе, углубляться в изучение типов документа нет ни какого смысла, ибо с выходом HTML5 данная конструкция стала стандартом. Просто вставляйте ее в начало документа каждый раз, когда начинаете верстать макет сайта.
<html> — начало документа
<html>
Первый тег, который мы встречаем после доктайпа, это <html>.
HTML тег — структурная единица разметки HTML документа. Код HTML складывается из кирпичиков, которые именуются тегами. Каждый тег имеет свою функцию, а изучение языка разметки HTML, в конечном счете, заключается именно в изучении тегов и их свойств в документе.
Хотелось бы отметить, что изучение HTML не такое сложное занятие, как может показаться на первый взгляд. Выучить используемые в разметке документа теги — не такая уж и большая нагрузка на мозг.
Итак, разметка документа начинается с тега <html> и заканчивается закрывающим тегом </html>. Каждый тег, который содержит в себе другие теги или элементы должен закрываться закрывающим тегом. Например, <html></html>, <p></p>, <div></div>, и т. д.
Тег <html> является обязательным, так как содержит всю структуру документа и является оболочкой для остальных элементов.
Тег <head>
<head>
Далее, мы видим тег <head>, который содержит другие, пока не понятные нам элементы. Содержит другие элементы — это значит, что элементы или теги находятся между открывающим и закрывающим тегом конструкции:
<тег>
содержание или другие теги
</тег>
Тег <head> предназначен для хранения метаинформации HTML документа, то есть информации, которая не отображается в самом документе, но является важной и во многом определяет, как документ будет выглядеть и как себя вести. Данный тег обязателен в документе.
Тег <title> — заголовок документа
<title>Заголовок</title>
Заголовок <title> является обязательным тегом, содержащим текстовую метаинформацию, которая отображается в заголовке браузера или вкладки. Тег <title> должен находиться в теге <head>. Также, содержимое данного тега используется поисковыми системами для отображения документа в результатах выдачи.
Метатег <meta charset=»UTF-8″ >
<meta charset="UTF-8" >
Метатег, содержащий информацию о кодировке документа. Очень желательно указывать данный тег во всех создаваемых документах для правильного отображения. Отсутствие данного тега может привести к тому, что вместо слов, на странице будут отображены неведомые символы и текст перестанет быть разборчивым и человекопонятным.
Метатег — специализированный тег, предназначенный для предоставления структурированных данных о странице. Метатеги чаще всего используются в теге <head>. Метатеги не являются обязательными в структуре HTML документа.
Рекомендую во всех HTML документах изначально использовать кодировку UTF-8, как в примере выше.
Фавиконка (favicon)
<link rel="icon" href="favicon.ico" >
Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) — миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка — это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки — это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.
CSS стили документа
<link rel="stylesheet" href="style.css">
Подключает к документу CSS файл со стилями оформления HTML.
CSS — каскадные стили оформления HTML документа. У каждого тега, который находится в теге <body>, имеется набор свойств, такие как — цвет, ширина, высота, положение относительно других элементов. Все эти свойства и есть стили CSS, которые можно вынести во внешний файл. Конструкция <link> подключает внешние файлы к документу HTML, в том числе и стили CSS.
Примечание: свойство href конструкции <link > указывает расположение внешнего файла. В нашем примере, файл style.css и favicon.ico, находятся в той-же папке, что и файл index.html. <link> не имеет закрывающего тега.
Тег <script> содержит код или ссылку на файл javaScript и чаще всего используется внутри тега <head>, хотя инструмент оптимизации скорости загрузки страниц от Google, рекомендует данный тег использовать в конце документа, перед закрывающим тегом </body>.
В нашем примере подключается внешний файл script.js, который находится в той-же папке, что и основной файл index.html.
Итак, друзья, мы рассмотрели основные элементы, которые используются в теге <head> чаще всего. Кроме этих элементов, для <head> есть ряд других, более специфичных и не обязательных.
</head>
Закрываем тег <head> и шагаем дальше.
Тело aka body
<body>
Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.
Перейдем, непосредственно, к верстке видимой части страницы. Все, что мы пишем и верстаем внутри тега <body> будет отображено в браузере. Откроем наш файл index.html в браузере для того, чтобы наглядно видеть, что мы делаем в редакторе.
Тег <body> может содержать любые HTML теги, необходимые для оформления документа и обеспечения его функционала (формы). Приведу таблицу наиболее используемых тегов и вкратце опишу каждый. Вы можете сразу выполнять приведенные примеры в редакторе.
Атрибут href указывает документ, на который будет вести данная ссылка.
<em>,
<strong>
Делает текст курсивом или жирным (акцентируемым). Пример:
<em>текст курсивом</em>
<strong>жирный (акцентируемый) текст</strong>
<h2>,
<h3>,
<h4>,
<h5>,
<h5>,
<h6>
Заголовки документа. Всего существует 6 уровней заголовков, но на практике используются только от h2 до h5. В документе должен быть только один заголовок, выделенный тегом h2, как главный заголовок документа. Примеры:
<h2>Заголовок первого уровня</h2>
<h3>Заголовок второго уровня</h3>
<h4>Заголовок третьего уровня</h4>
... и т. д.
<ol>,
<ul>
Списки документа. Представляют собой нумерованный или маркированный список. Элементом такого списка является тег <li> Примеры:
Абзац. Данный тег определяет абзац текста, отбитый от остальных абзацев. Закрывать данный тег очень желательно. Пример:
<p>Внешний вид HTML разметки во многом
определяется CSS стилями.</p>
<p>Тем не менее, некоторые веб-мастера
предпочитают не использовать стили на первых
этапах проекта.</p>
<img>
Картинка. С помощью данного тега в HTML разметку можно вставить картинку. Обязательно указывайте у всех изображений альтернативный текст — атрибут «alt». Данный тег «самозакрывающийся». Пример:
<img src="путь_до_картинки.jpg" alt="Текст">
<form>
+ <input>
+ <textarea>
Формы и элементы ввода. Формы предназначены для ввода информации в систему на сервере. Этакая обратная связь пользователя и сайта. Например, формы используются, когда нужно отправить какое-то сообщение на сервер. Кроме того, формы могут выполнять и другие функции, но основная задача — отправка данных на сервер. Пример — простая форма отправки сообщения, в которой пользователь сайта указывает свое имя, E-mail и какой-то текст:
<form action="ссылка_на_скрипт_обработки_формы">
<input type="text" name="name">
<input type="text" name="email">
<textarea name="text">
Текст сообщения
</textarea>
<input type="submit" value="Написать">
</form>
<span>
Определяет подстроку в строке. Применяется для определения стиля части строки посредством CSS. Один из самых часто используемых тегов. Без оформления, ни как не проявляет себя в браузере. Пример:
Изучение HTML, в большинстве случаев, не вызывает
<span>ни каких сложностей</span> у новичков.
<video>,
<audio>
Теги предназначены для вставки видео и аудио в документ. Обязателен закрывающий тег. Примеры:
Параметр controls говорит нам о том, что на странице должны отображаться элементы управления медиаконтентом, как в обычном аудио/видео плеере.
<div>
Во истину, королевский тег. Самый используемый и популярный тег в HTML разметке страницы. Это блочный элемент, предназначенн для управления блоками на сайте. Часто употребляется понятие «дивной» верстки — это значит, что все блоки на сайте сверстаны с использованием данных тегов. Может содержать другие теги <div>. Пример:
<div>
<div>
Текст во вложенном блоке
</div>
</div>
Все элементы <div>, в большинстве случаев, оформляются свойствами CSS стилей. Обязателен закрывающий тег </div>.
<iframe>
Данный тег загружает внешнюю страницу в документ. Пример:
<iframe src="http://rtfm.org.ru"></iframe>
Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное — понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.
Обратите внимание на то, что все названия в подключаемых файлах должны писаться латинскими символами, без пробелов.
Например, не:
<video src="ролик чума.mp4" controls></video>
а:
<video src="rolik_chuma.mp4" controls></video>
Это необходимо для большей совместимости содержимого страницы. К тому-же, стандарты написания HTML кода, диктуют.
Итак, теперь мы знаем некоторые основы HTML: какая структура должна быть у типового HTML документа, знаем некоторые наиболее ходовые теги, пора приступить к самому вкусному — а именно, печенькам.
Практическое задание по HTML верстке
Если вы еще не скачали архив с примерами, сделайте это. Для примера, можете подглядывать в файл example.html, который также находился в архиве.
Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;
Создайте первоначальную структуру документа с доктайпом, тегом <html>, содержащим <header> и <body> и перейдите к редактированию содержимого тега <body>;
Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.
На этом урок по основам HTML окончен, в следующем уроке «Основы CSS» мы научимся управлять стилями элементов документа, познакомимся ближе с каскадными таблицами стилей, научимся использовать классы стилей и сделаем нашу верстку красивой и красочной.
Премиум уроки от WebDesign Master
Другие уроки по теме «HTML и CSS»
Учебник по основам HTML, для начинающих
Видеокурс по HTML для начинающих от компании WebForMySelf.
HTML — это сокращение от «HyperText Mark-up Language» — язык разметки гипертекста. То есть простыми словами – это язык, с помощью которого мы можем оформить и представить информацию для отображения в интернете. Оформление страниц в языке html происходит, используя специальные конструкции — теги.
В данном учебнике по основам html для начинающих мы с вами будем изучать язык html и его теги. Тегов в html достаточно много. Но особенностью данного курса является то, что мы не будем в нем рассматривать детально все html теги. Поверьте, мне за почти 10-летний опыт разработки некоторые теги приходилось использовать всего несколько раз. Поэтому я не вижу смысла подробно рассматривать все теги, некоторые из которых вы, возможно, никогда не примените.
В учебнике по основам html для начинающих мы подробно рассмотрим необходимые для создания сайтов теги. Изученных тегов вам будет вполне достаточно для создания сайтов практически любой сложности, и при этом количество тегов будет приемлемо для качественного усвоения и запоминания. В курсе предусмотрены задания для самостоятельного выполнения, что помогает лучше изучить html на практике.
Вот разделы html, которые мы рассмотрим в курсе: форматирование текста, работа с изображениями, ссылки, списки, таблицы, формы.
Все уроки курса:
Количество уроков: 8
Продолжительность курса: 01:57:09
Автор: Андрей Бернацкий
Один из создателей проекта «Основы Самостоятельного Сайтостроения». Адрес в сети — www.WebForMyself.com. Свободно владеет такими техниками как: HTML, CSS, JavaScript, jQuery, AJAX, PHP&MySQL.
Описание курса: В данном Премиум курсе подробно рассказано о языке HTML, о тегах форматирования текста, о тегах разметки, о вставке изображений на сайт, ссылках, html таблицах, формах и многом, многом другом.
Категории премиум
Учебник HTML5
260
Web-программирование — Учебник HTML5
С первого взгляда можно предположить, что HTML5 — это пятая версия языка HTML для создания веб-страниц. Но в действительности все не так просто.
HTML5 — неформал. Его придумала группа вольнодумцев, которые не входили в группу, отвечавшую за официальный стандарт HTML. В стандарте HTML5 разрешаются методы написания страниц, которые были запрещены десять лет тому назад. В нем подробно изложены инструкции браузерам, как обрабатывать ошибки в разметке страниц, чтобы попытаться отобразить эти страницы, вместо того чтобы сразу же забраковывать их.
Он, наконец, позволяет воспроизводить видео, не прибегая к помощи модулей расширения браузера, таких как, например, Flash. Также в этом стандарте вводится лавина функциональностей, движимых JavaScript, которые могут придать веб-страницам определенные расширенные, интерактивные возможности, встречаемые в программном обеспечении для настольных компьютеров.
Разобраться в HTML5 — задача не из легких. Самой большой проблемой является то обстоятельство, что термин «HTML5» используется для обозначения свыше дюжины отдельных стандартов. (Как мы узнаем, эта ситуация является результатом эволюции HTML5, который начинался как единый стандарт, но впоследствии был разделен на более управляемые части.)
В действительности, термин «HTML5» сейчас означает «HTML5 и связанные стандарты» и, в еще более широком понимании, «следующее поколение технологий разработки веб-страниц». Вот такую версию HTML5 мы и будем рассматривать: все от базового языка HTML5 до новых возможностей, сброшенных в одну кучу с HTML5, хотя они никогда и не были частью этого стандарта.
Теоретический материал:
1. Введение в HTML5
2. Веб-формы
3. Аудио и видео
4. Canvas
5. Web Storage API и File API
6. Автономные приложения
7. Взаимодействие с веб-сервером
8. Geolocation API, Web Workers и другие средства
Самоучитель, справочник html, css, javascript и php
Сеть Интернет уже давно стала для нас чем-то необходимым, каждодневным и универсальным. В сети каждый находит для себя что-то нужное, интересное или даже необходимое. Обилие Интернет сайтов, сервисов социальных сетей, форумов и многих других, полезных и не очень, ресурсов просто поражает. В сети можно найти все: от списка ресторанов и кинотеатров, куда бы вы хотели пойти, до подробного описания принципа работы адронного коллайдера, с подробными примерами и чертежами по его созданию.
Но как это работает, что нужно сделать, чтобы построить свой собственный сайт?
Если вас интересуют именно эти вопросы — вы зашли по адресу. Сайт www.puzzleweb.ru – это универсальный самоучитель и справочник по HTML 5, CSS, JavaScript и PHP, на страницах которого вы сможете не только узнать, как работают интернет сайты, но и научитесь создавать их самостоятельно.
Как пользоваться сайтом?
Для удобства восприятия и изучения материала сайт разделен на четыре основных раздела, в каждом из которых вы найдете всю необходимую информацию по интересующей вас теме:
HTML
Самоучитель HTML – это подробное руководство по языку разметки HTML, включая все обновления и дополнения к языку в версии HTML 5. Полезно знать, что на каком бы языке программирования ни был бы написан сайт, для браузера пользователя его структура всегда подается в виде HTML. Справочник html также поможет вам свободно ориентироваться в данном языке.
CSS
Самоучитель CSS, а также удобный справочник CSS, откроют перед вами практически безграничные возможности по оформлению интернет сайта. Перед вами предстанет интереснейший мир разнообразия форм и цветов, какими может обладать ваш сайт.
JavaScript
Самоучитель JavaScript – это удобнейшее онлайн пособие для начинающего программиста, после изучения которого вы научитесь создавать интерактивные интернет сайты. Изучение JavaScript даст вам возможность более качественно удовлетворять потребности посетителей вашего сайта.
PHP
Если вы хотите научиться создавать динамические веб-сайты, уже знакомы с основами разметки HTML, но не представляете себе, как использовать для этих целей язык программирования PHP, то наш раздел по PHP станет вашим незаменимым помощником.
Для кого создан сайт www.puzzleweb.ru?
Сайт будет полезен не только для начинающих WEB-программистов, но и для тех, кто уже умеет создавать сайты и приложения. Благодаря наличию на нашем ресурсе удобных справочников по CSS и HTML, вы всегда сможете быстро определить значение интересующего вас тега или свойства, не теряя времени на поиски информации в книгах или в Интернете. На страницах наших самоучителей вы найдете множество практических примеров исходного кода страниц, скриптов, которые вы с легкостью сможете применить для создания собственного проекта.
Современный учебник CSS: ваш онлайн-самоучитель
Учимся создавать веб-страницы, отвечающие современным требованиям.
Современный учебник CSS — это онлайн-книга, призванная ознакомить веб-разработчиков с современными способами создания сайтов, в том числе и адаптивных. В ней рассматриваются новейшие методы применения CSS и HTML. Материал рассчитан на тех, кто уже знаком с HTML хотя бы на начальном уровне.
Немного о таблицах стилей
Веб-страница создается и структурируется с помощью стандартного языка разметки — HTML. Раньше, в середине 90-х годов, этот язык использовался и для стилевого оформления документа, но сейчас всё, что касается дизайна страниц, решается с помощью каскадных таблиц стилей (Cascading Style Sheets — англ.). У CSS есть множество достоинств и возможностей, о которых вы узнаете по ходу чтения книги.
Главными плюсами CSS являются компактность и удобство. Во-первых, отказываясь от создания дизайна прямо в HTML-документе, вы делаете веб-страницу более аккуратной и чистой — нет длинного кода и неразберихи, страница грузится быстрее, а поисковому роботу становится легче сканировать содержимое. Все стили загружаются из внешнего файла, где хранятся исключительно правила CSS для оформления страницы. Во-вторых, появляется отличная возможность мгновенно править что-либо в оформлении всего сайта. Достаточно подкорректировать файл CSS и изменения станут видны на всех страницах, к которым подключен этот файл.
Сегодня благодаря широким возможностям CSS вы можете научиться разрабатывать сайты, которые будут корректно отображаться на любых устройствах, и таким образом выйти на новый, современный уровень.
Для кого эта книга
Если вы желаете научиться не просто создавать веб-страницы, а создавать их правильно и красиво, этот учебник по CSS для вас. Мы стараемся преподносить информацию доходчиво, простым языком, поэтому материал будет понятен новичкам, для которых в каждой главе самоучителя найдутся ценные рекомендации и примеры.
Желаем вам успехов в обучении!
СОДЕРЖАНИЕ
Часть I. Азы CSS
Подготовка почвы: поговорим об HTML
Синтаксис CSS. Подключение внешних таблиц. Создаем первый стиль
Изучение селекторов:
Селекторы CSS. Теги, классы, ID, группы
Селекторы потомков. Псевдоклассы и псевдоэлементы CSS
Дочерние селекторы CSS. Дополнительные псевдоклассы
Соседние и родственные селекторы
Селекторы атрибутов
Урок: тренируемся применять селекторы
Наследование в CSS: что это и как работает
Каскадность CSS. Приоритеты стилей
Часть II. Использование CSS
Работа с текстом:
Подключение шрифтов CSS. Работа с веб-шрифтами. Google Fonts
Установка цвета для текста в CSS. Способы представления цветов
Размер шрифта в CSS. Единицы измерения px, %, em
Жирный шрифт и курсив CSS
Прописные и строчные буквы в CSS: свойство text-transform
Подчеркивание, зачеркивание текста в CSS: свойство text-decoration
Тень для текста: свойство CSS text-shadow
Межсимвольный, межстрочный интервал CSS. Расстояние между словами
Выравнивание текста в CSS: свойство text-align
CSS для списков: свойство list-style и его производные
Работа с блоками:
Вступление. Блоки
Поля и отступы CSS: отличия свойств margin и padding
Блочные и строчные элементы
Свойство border: границы для блоков
Border-radius: закругленные углы в CSS
Box-shadow: тень для элемента
Width и height: определяем размеры элемента
Box-sizing: управляем вычислением ширины и высоты
Overflow: управление переполненными элементами
Max-width, max-height, min-width, min-height: максимальные и минимальные размеры элемента
Поток документа. Свойства float и clear
Практика: делаем адаптивную посадочную страницу
Работа с графикой:
CSS для тега img
Background-image: установка фонового изображения
Относительный и абсолютный путь к файлу
Background-repeat: повторение фоновой картинки
Background-position: позиционирование фона
Background-attachment: фиксация фона
Свойства CSS3 background-origin и background-clip
Background-size: масштабирование фонового рисунка
Свойство background: все настройки фона в одном месте
Несколько фоновых рисунков для одного элемента
Linear-gradient(): линейный градиент в фоне
Repeating-linear-gradient(): градиент с повторением
txt».
. ну к примеру того же Internet Explorerа (правой кнопкой по нашему файлу.. «Открыть с помощью..» Internet Explorer)
То есть исходный HTML код для нас скрыт и в него мы не лезем.
Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:
Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру — от каждого действия остается след в исходном HTML коде. Редактор — это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру — от каждого действия остается след в исходном HTML коде. Редактор — это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
Язык разметки HTML прост в освоении и понимании, а средств автоматизации написания HTML кода множество, но об этом в других уроках.
ico">
<link rel="stylesheet" href="style.css">
<script src="script.js" type="text/javascript"></script>
</head>
<body>
Тело документа
</body>
</html>
Фавиконка — это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки — это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.
В нашем примере, файл style.css и favicon.ico, находятся в той-же папке, что и файл index.html. <link> не имеет закрывающего тега.
Данный тег определяет абзац текста, отбитый от остальных абзацев. Закрывать данный тег очень желательно.
Кроме того, формы могут выполнять и другие функции, но основная задача — отправка данных на сервер.
Обязателен закрывающий тег.