Такие языки гиперразметки, как html и CSS не так сложны в изучении, как это может представляться в начале знакомства с ними. В их основе лежат вполне закономерные и доступные для понимания принципы, освоив которые можно с легкостью решать многочисленные проблемы, появляющиеся в работе собственного сайта.
Базовое владение основами html и CSS позволит вам самостоятельно устранять неизбежно возникающие мелкие неполадки в работе веб-ресурса, редактировать информацию на сайте, расставлять гиперссылки, размещать изображения, выделать необходимую информацию различными способами.
Html — основа верстки и базовый компонент в организации элементов сайта
Html — это тот базис, на который впоследствии накладываются другие знания об управлении ресурсом и организации его элементов. Данный язык разметки является одним из самых главных и наиболее часто используемых. И именно возможности html позволяют располагать элементы на веб-странице в необходимом месте и придавать им нужный размер и вид.
Считывают информацию, которая размечается с помощью html, специально разработанные приложения, более известные под названием браузеров или интернет-обозревателей. Самыми используемыми сегодня интернет-браузерами являются:
Internet Explorer
Google Chrome;
Opera;
Mozilla Firefox.
При этом создатели браузеров могут самостоятельно формировать новые наборы элементов для html. В конце 90-х годов именно по причине такого активного творчества конкурирующих разработчиков браузеров и сформировалось явление «браузерная война». Его суть сводилась к тому, что некоторые html-страницы отображаются корректно в одном интернет-обозревателе, а в другом пользователь видит их с ошибками. Единственным выходом из ситуации браузерного конфликта является использование кросс-браузерной верстки.
Редакторы для создания страниц html
Создать или отредактировать html-страницу можно с использованием редакторов html. Самым простым и известным является текстовый редактор Notepad, который не написан специально для работы с разметкой html, но поддерживает эту функцию. Более функциональными и разработанными именно для работы с html являются редакторы:
Notepad++ — работает с исходным кодом и распространяется свободно.
Macromedia Dreamweaver — отличается набором расширенных функций по редактированию и просмотру создаваемой разметки, а так же имеет возможность показывать готовую страницу.
Adobe Dreamweaver — подобно предыдущему редактору обладает функцией показа готовой страницы, то есть позволяет пользователю просматривать редактируемый вариант в том виде, в котором она будет отображена в браузере. Эта программа является более поздней версией, которая появилась вследствие усовершенствования специалистами Adobe выкупленной у компании Macromedia их редактора. Ввиду этого обстоятельства программы Macromedia Dreamweaver и Adobe Dreamweaver очень похожи.
Microsoft Front Page — входит в пакет приложений Office и имеет достаточный объем возможностей для обработки и создания html-разметки.
Основные теги
Документ, в котором использована html-разметка, является простым набором компонентов, которые сегментированы с помощью специальных знаков, называемых тегами. Теги заключают элемент, тем самым придавая ему определенный вид и определяя его место. Есть и случаи, когда тег ничего не заключает: это касается сочетания , которое отбивает строку.
Тег, который находится перед заключаемым элементом, называется открывающим и выглядит так < тег >. Тег, который находится после заключаемого элемента, называется закрывающим и выглядит так тег >. Наличие слеша (/) для закрытия тэга обязательно, иначе компонент не сработает. Это правило относится к большинству тегов, за исключением упомянутого выше и некоторых других. К основным тегам html относятся:
— тег, непосредственно указывающий на принадлежность файла к html-формату;
— тег, который является невидимым в документе и предназначен для обозначения имени документа и его характеристик для поисковых роботов;
— тег, определяющие границы видимой части документа;
— тег, отправляющий название страницы в оглавление;
, , , — теги форматирования текста и создающие жирный текст, наклонный текст, отбивающие абзац, формирующие нумерацию.
Наряду с тегами, результат которых видит посетитель страницы в виде жирных или курсивных написаний, существуют и служебные теги, которые называются мета-тегами и дают необходимую информацию поисковым машинам, браузеру, но не видимы обычному пользователю.
Для создания html страницы необходимо последовательное выполнение описанных ниже действий. Использовать можно обычный блокнот.
1) Создаём документ. В него вставляем следующий код:
Содержимое этого элемента будет отображается в браузере
Примечание:
обязательно в «
» указываем кодировку документа как показано выше.
2) Далее: файл - сохранить как. В поле «тип файла» вместо «txt» выбираем «All files» (все файлы), в поле codepage (кодировка страницы) - выбираем 65001 (UTF-8), в поле «имя файла» после названия документа ставим точку и расширение html (.html), далее нажимаем сохранить. У нас в той же папке появился второй документ, но уже в html. Это и есть наша веб страница, которую теперь можно открыть в любом браузере.
Примеры html кода
Текст разбитый на параграфы
Параграф 1
Параграф 2
Параграф 3
Заголовки и абзацы с выравниванием по центру
Это заголовок выровнен по центру.
Заголовок второго уровня выровнен по центру.
Текст абзаца выровнен по центру.
Мета-теги, название страницы (title), описание страницы (description) и ключевые слова (keywords)
Там, где функционал html оказывается недостаточным, на помощь приходят каскадные таблицы стилей — CSS. Они представляют собой более совершенные мощные параметры для изменения внешнего вида веб-страницы. CSS функционируют вместе с возможностями html. Эти два набора параметров взаимодействуют и никаким образом не заменяют друг друга.
Параметры CSS могут быть размещены в самом веб-документе путем использования:
тегов , которые находятся между тегами и ;
атрибута style, располагающегося внутри любого другого тега.
Также указания CSS могут быть присоединены к веб-документу с помощью:
тега , размещаемого между и ;
директивы @import, располагаемой между тегами .
В процессе написания таблицы стилей необходимо строго соблюдать особый синтаксис, предполагающий соподчинение элементов и их иерархию, в которой позиции распределены между указателем, свойством, значением, описанием и строкой. При этом для обозначения свойств используются фигурные скобки, и каждому тегу можно присвоить сразу несколько свойств.
Способы подключения таблиц CSS стилей
Существует несколько способов подключения CSS к html:
встроенные таблицы, при котором в заголовок страницы встраивается таблица стилей с использованием тега ;
Примечанеие:
«font-family» — это название шрифта, «font-size» — размер шрифта, «color» — цвет шрифта, «background-color» — цвет фона.
внутренние таблицы CSS, когда таблица помещается внутри элемента html;
Страница со стилями внутри элемента
Отформатированный текст
К этому тексту уже применёт второй стиль
внешние таблицы CSS, при использовании этого способа подключения таблицы стилей создаются отдельным файлом.
Такой способ является наиболее удобным и поэтому часто используемым. Подключение в данном случае производится с использованием тега и будет выглядеть следующим образом:
Подключение CSS к HTML
Это заголовок первого уровня
Здесь просто текст
Это заголовок второго уровня
Здесь просто текст
А вот содержимое CSS файла «style.css» таким образом для текста, которому присвоен класс «form» применяются стили, в данном случае: название шрифта, размер шрифта и цвет фона.
Form { font-family:Verdana, Geneva, sans-serif; font-size:12px; background-color:#3FF; }
Информационный материал подготовлен сотрудниками студии веб-дизайна «БЕЛЫЙ ПАРУС»
Мы искренне надеемся, что он будет полезен всем, кто решил овладеть основами html и css.
This entry was posted on Воскресенье, Март 17th, 2013 at 08:47 and is filed under . You can follow any responses to this entry through the feed.
Responses are currently closed, but you can from your own site.
Если вы хотите совершенствовать свои навыки разработки, лучший путь к совершенству - практика. Предлагаем вашему вниманию ресурсы для проверки знаний в HTML/CSS.
Именно поэтому важно находить разные способы практиковаться и выявлять свои сильные и слабые стороны.
Практический опыт помогает рационально оценивать пробелы в своих знаниях и непрерывно совершенствовать свои навыки. Более того, тестирование ваших знаний позволит сохранить уверенность в том, что вы остаетесь на волне последних тенденций в вашей области.
Итак, предлагаем вам десять способов протестировать себя на знание HTML и CSS и стать более профессиональным веб-разработчиком.
Начните собственный проект
Быть экспертом в теории - это замечательно, но вряд ли вы достигнете больших высот, если не умеете применять свои обширные знания на практике. Именно поэтому начать проект - лучший план действий для вас. В процессе разработки, например, собственного сайта, вы сможете отмечать прогресс и оценивать достижение своих целей.
Соревнуйтесь
Лучший способ проверить себя на прочность - принять участие в настоящих соревнованиях по программированию, например, в сообществе CodeWars
. В форме игры вы соревнуетесь с другими реальными людьми, извлекая опыт из собственных ошибок. Но это имеет смысл только если вы играете честно.
Присоединитесь к сообществу
Если соревнования - слишком сложный выбор для вас, особенно если вы совсем новичок, хорошим вариантом будет присоединиться к сообществу для тестирования и дальнейшего обучения. В процессе общения намного проще определять свои сильные и слабые стороны и работать над ними.
Одновременно с этим сообщество - это компания талантливых людей, которые дают вам возможность и стимул совершенствоваться. Принимая участие в обсуждениях, вы можете смело задавать вопросы и получать нужную вам информацию.
Упражняйтесь в песочнице
Данный инструмент запускает ваш код и позволяет увидеть результат его выполнения. Проекты запускаются в браузере и могут участвовать в конкурсах и соревнованиях, что покажет, насколько высокие ожидания они способны оправдывать.
Ресурс содержит множество открытых для изучения проектов, что позволит вам понять, как они работают, и применить полученные знания в собственной практике. Время от времени с целью мотивации участников на сайте проводятся конкурсы, в которых можно помериться силами с другими программистами с возможностью занять высокие позиции в списке лидеров и выиграть призы.
Попробуйте паззлы и блиц-опросы
В сети доступно необъятное множество опросников и паззловых игр, которые охватывают HTML, CSS и другие языки программирования. Как правило, они присутствуют на платных сайтах в качестве дополнения к обучающим курсам. Также вы можете поупражняться с более опытным наставником.
Играйте
Не секрет, что, если вы вдруг решите повеселиться, то можете извлечь из такой формы обучения намного больше пользы, чем из сухой теории и нарешивания упражнений. Играя, вместе с навыками программирования вы получаете удовольствие, заряд позитивных впечатлений и высокий уровень удовлетворенности результатами. Игра делает возникающие задачи более живыми и интересными, а значит заставляет работать фантазию и творческое мышление.
Найдите сайт с интерактивными тестами
Самым простым способом объективно оценить навыки программирования является посещение сайта для тестирования. Тесты дают возможность поработать над разнообразными вопросами и хорошо потренироваться. Можно оценить свой уровень до и после прохождения какого-либо теста или курса тестов.
Дисциплинируйте себя
Важной частью процесса обучения и проверки собственных знаний является выявление наиболее оптимального способа достичь максимальной продуктивности. Вы можете участвовать в мероприятиях, которые помогут вам найти этот способ. Например, Clean Coders
- это сайт, дающий такую возможность через профессиональные обучающие видео. Более того, эти видео весьма интересны, поэтому можете не беспокоиться о концентрации, вы втянетесь с первых минут.
Оглянитесь на мир вокруг
Поставьте себя рядом с разработчиками со всего света. Есть социальная сеть, которая позволяет связываться с программистами-фрилансерами более чем из ста стран мира. Вы найдете множество талантливых людей, а также возможность оценить свои способности и научиться новому.
Я решил уделить больше внимания новичкам, желающим приобрести знания в области сайтостроения. На это меня подтолкнула моя преподавательница, которая допускала уж очень много ошибок в методичках к лабораторным работам. Я бы с удовольствием бы глянул на тот ресурс, с которого была взята учебная инфа, и оставил бы там пару строк своего мнения. Но сейчас не об этом. В своей первой лекции я расскажу о том
Из чего состоит структура HTML-документа
Тег сообщает о том, что начинается структура html-документа, — что заканчивается. Между тегами хранится в большей части информация для браузера и поисковых систем. В тегах содержится заголовок нашей страницы. Тег говорит о том, что далее идёт информация предназначенная для пользователя, же естесственно говорит о том, что информация для пользователя заканчивается.
Теперь немного поясню. Все теги (тэг — элемент языка разметки гипертекста
) делятся на два типа «одиночные» и «закрывающиеся». Кроме того теги заключаются в следующие символы <
и >
, именно они отличают тег от обычного текста html
. Рассмотрим несколько самых простых «одиночных» тегов:
— тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.
Мой первый сайт
Привет всем! А это мой первый сайт.
Результат можно посмотреть .
— тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:
align — Определяет выравнивание линии. Может принимать значение left, center, right.
color — Задаёт цвет линии.
noshade — Рисует линию без трехмерных эффектов.
size — Задаёт толщину линии.
width — Задаёт ширину линии.
Код с использованием тега :
Мой первый сайт
Привет всем!А это мой первый сайт.
Визуальный пример находится .
Ещё один «одиночный» тег — это . Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между и . Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content
, name
или http-equiv
. Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:
Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки: