Изучаем HTML/CSS #1. Начало цикла.

1
13384

Здравствуйте читатели exabyte. Сегодня торжественно объявляю о начале цикла обучающих статей про HTML и CSS. Главной задачей будет познакомить новичков с языком разметки html и языком стилей css, дать устойчивую базу знаний, научить эффективно применять эти основополагающие инструменты любого web-разработчика. На протяжении всей серии критика и пожелания будут полностью изучены и максимально применены в написании последующих уроков.

Для кого это пишется

Вся серия уроков будет одинакова полезна, как начинающим, так и продвинутым пользователям, поэтому, сказать прямо — достаточно сложно. Новички смогут вникнуть в основы веб-разработки и начать применять инструменты разработчика эффективно, а продвинутые пользователи смогут узнать для себя что-то новое. Цель цикла не просто рассказать основы, способы, техники, но и дать практику, которая поможет быстрее начать применять html и css в собственных целях.

Введение в цикл

Сегодня, наверняка, уже не новость, что база любой интернет страницы строится на языке разметки html, если посмотреть на расшифровку самой аббревиатуры html, то мы узнаем её значение — «Hyper Text Markup Language», иначе — язык разметки гипертекста. Не стоит путать язык разметки с языком программирования, это совершенно разные вещи, а называть html языком программирования грозит крепкими словами в сторону назвавшего, поэтому называем его ‘язык разметки’ и живем спокойно.

Рассказывать длинную историю создания языка html я в данной серии не намеривался, т.к. любой может почитать об этом в википедии.  Скажу только, что html прошел огромный путь развития и стал стандартом для всех. Весь интернет это миллионы экзабайтов строк html кода.

Востребованность в данном языке обусловлена требованиям форматирования текста, т.е. его оформление на страницах браузера и конечно же, разметкой страницы. Начнем!

Установим Sublime Text

Для работы нам пригодится редактор кода, я рекомендую использовать sublime text, его бесплатную версию. Вы можете скачать его по этой ссылке, также вы можете использовать любой другой редактор кода, даже стандартный блокнот от Windows. Так выглядит редактор sublime text, в котором будут происходить все основные действия:

После установки открываем редактор и двигаемся дальше.

Углубляемся

Начнем с создания проекта, под проектом подразумевается точка основания, в нашем случае, это будет обычный файл с названием index и расширением .html, который мы разместим в папке. Название папки вы можете придумать сами, обычно, название папки является названием проекта.

Чтобы создать файл в sublime text в верхнем меню нажимаем File->New File , затем нажимаем File->Save As… , выбираем созданную нами папку, вводим имя файла (index), тип файла — HTML, сохраняем, готово! Файл создан и готов к работе.

Напишем нашу первую строчку, в созданном файле пишем:

Теперь, чтобы посмотреть результат, открываем наш файл через браузер, прежде не забудьте его сохранить.

Ваш первый html файл создан и работает. Идем дальше, теперь давайте вникать в основы Html языка, сейчас мы познакомимся с основными определениями. Каждый раз, когда мы пишем на языке html, мы создаем участки web-страницы, например: шапка сайта, центральная часть сайта и т.д., все это создается с помощью тэгов. Тэг — это основа разметки web-страницы, благодаря тэгам, мы можем отделять курсивный текст от обычного, отделять шапку сайта от подвала и т.д. . Все тэги в html начинаются с угловых скобок — <  >, между ними пишется сам тэг. Первый тэг, с которого начинается web страница — это тег <html>.

Так как тэг имеет начало, необходимо указать конец, таким образом, мы можем разграничивать требуемые нам зоны (блоки). Конец тега пишется так: </html>.

Создав два тэга html, один открывающий другой закрывающий мы создали блок-границу html документа, таким образом, мы выполнили первый принцип парных тэгов в html. Все что будет располагаться между ними и есть html-документ. Теперь давайте создадим параграф с помощью тэга, для этого используется тэг <p>, соответственно чтобы создать параграф нам необходимо написать конструкцию так:

А вот как будет выглядеть код в редакторе кода:

Чтобы быстро сохранить файл, вы можете использовать комбинацию клавиш Ctrl+S . Посмотреть результат можно в браузере, открыв файл через него.

В данном уроке, мы разобрались, что такое html тэг и создали первый файл. В дальнейшем мы познакомимся с полным скелетом html документа и узнаем о одиночных тегах.

Спасибо за внимание. Данная статья положила начало отличной серии. Надеюсь Вам понравится. Подписывайтесь на нас и будьте всегда в курсе новых уроков. До скорых встреч!

Ссылка на второй урок из серии «Изучаем HTML/CSS #2».

1 КОММЕНТАРИЙ

  1. […] если вы его не читали, тогда рекомендуем это сделать HTML урок 1. Второй урок будет посвящен макету html документа. Макет […]

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя