Основы html и css для начинающих книга: Скачать учебник, описания, примеры, библиотеки

Пример

Как просмотреть исходный код HTML?

Вы когда-нибудь видели веб-страницу и задавались вопросом: «Эй! Как они это сделали?»

Просмотреть исходный код HTML:

Щелкните правой кнопкой мыши страницу HTML и выберите «Просмотр исходного кода страницы» (в Chrome) или «Просмотр исходного кода» (в Edge) или аналогичное в других браузерах. Это откроет окно содержащий исходный HTML-код страницы.

Проверить элемент HTML:

Щелкните правой кнопкой мыши элемент (или пустую область) и выберите «Проверить» или «Осмотрите элемент», чтобы увидеть, из каких элементов состоят (вы увидите оба HTML и CSS). Вы также можете редактировать HTML или CSS на лету в Откроется панель «Элементы» или «Стили».

5 шагов к пониманию базового HTML-кода

HTML — это жизненно важная часть Интернета, как мы ее знаем. И хотя немногие веб-дизайнеры создают страницы, вручную набирая HTML, все же полезно знать об этом немного.

Мы собираемся изучить некоторые основы языка, включая то, что на самом деле представляет собой HTML, некоторые фундаментальные концепции и то, как он взаимодействует с другими языками.

Основы HTML: что такое HTML?

HTML означает язык гипертекстовой разметки . И хотя его иногда связывают с языками программирования, это не совсем верно.

Как язык разметки , HTML позволяет создавать только макет отображения страниц.Настоящий язык программирования , такой как Java или C ++, содержит логику и выполняемые команды.

Хотя это просто, HTML лежит в основе каждой страницы в Интернете. Он отвечает за то, какой текст будет отображаться полужирным шрифтом, за добавление изображений и ссылки на другие страницы. У нас есть ответы на часто задаваемые вопросы в формате HTML, которые объясняют больше

HTML существует уже давно, так что пришло время изучить основы. Вот что это такое, как это работает и как сегодня можно написать некоторые общие элементы в HTML!

Вы можете щелкнуть правой кнопкой мыши большинство веб-страниц в своем браузере и выбрать Просмотреть исходный код страницы или аналогичный, чтобы увидеть скрытый за ними HTML.Скорее всего, он также будет содержать много кода, отличного от HTML, но вы можете его просмотреть.

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

HTML использует систему тегов для категоризации различных элементов документа.

Большинство тегов идут парами, чтобы заключить в них затронутый текст.Вот простой пример (

тег делает текст полужирным ; мы обсудим это позже. )

    


    


                
                        
            
        
            
            
                                                                                                                                                                                                                                    
                                        
            
                         
   Это жирный текст .  

Обратите внимание, как закрывающий тег начинается с косой черты (/). Это означает закрывающий тег, что важно. Если вы не закроете тег, все с самого начала будет иметь этот атрибут.

Однако не все теги имеют пару.Некоторые элементы HTML, называемые пустыми элементами , не имеют содержимого и существуют сами по себе. Примером может служить

тег, который является разрывом строки. Вы можете «закрыть» такие теги, добавив косую черту (например,

) но это не обязательно.

Шаг 2. Скелетный HTML-макет

В правильном HTML-документе должны быть определены определенные теги, чтобы он был правильно оформлен. Это основные части:

• Каждый HTML-документ должен начинаться с
  заявить о себе в качестве такового.Таким образом, его закрывающий тег,
  , это последний элемент в файле HTML.
• Далее
  Раздел включает такую ​​информацию, как заголовок страницы, различные сценарии, выполняемые на странице, и т. п. Как следует из названия, это обычно идет сразу после начального
  тег.Конечный пользователь не видит большой части содержимого этих тегов.
• Наконец,
  тег содержит текст страницы, которую видит читатель (и многое другое). Здесь вы найдете изображения, ссылки и многое другое.

Поскольку

Раздел составляет основную часть HTML-документа, остальная часть нашего пошагового руководства рассматривает элементы, которые к нему относятся.

Затем давайте рассмотрим некоторые общие теги, из которых состоят документы HTML. Конечно, невозможно охватить все элементы, поэтому мы рассмотрим некоторые из наиболее важных. Мы рассмотрели еще много примеров HTML, если они вас не устраивают.

Если эти теги кажутся довольно простыми, помните, что HTML был создан еще в 1993 году.В то время Интернет был в значительной степени текстовым.

Простое форматирование текста

HTML поддерживает базовые стили текста, как в Microsoft Word:

• Теги делают текст полужирным .

• теги (что означает «выделение») выделят текст курсивом.

HTML также поддерживает старые

тег для жирного и

для курсива. Однако предпочтительнее использовать указанные выше.

Коротко,

и

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

Параграфы и другие разделы

HTML

тег позволяет определить раздел документа. Обычно это используется в паре с CSS (см. Ниже), чтобы отформатировать раздел определенным образом.

В

тег позволяет разделить текст на абзацы. Браузеры автоматически оставляют место до и после них, позволяя вам естественным образом разбивать текст.

Вы можете добавить заголовки в свой документ и упростить отслеживание с помощью

через

теги. h2 — самый важный заголовок, а H6 — наименее важный. Почти в каждой статье MakeUseOf используются заголовки h3 и h4 для организации информации.

Нажатие Введите , чтобы добавить разрывы строк в HTML-документе, они фактически не будут отображаться.Вместо этого вы можете использовать

чтобы добавить разрыв строки.

Вот пример, в котором все это используется:

    


    


                
                        
            
        
            
            
                                                                                                                                                                                                                                    
                                        
            
                         
  
 
  
 Пример заголовка 
  
 
 Это один абзац. 
 
 
 Это второй 
 абзац, разделенный на две строки. 
 
 
 
  

Шаг 4: Вставка изображений

Изображения являются важной частью большинства веб-страниц. Вы можете легко добавлять их с помощью HTML и даже устанавливать для них различные свойства.

Вы вставляете изображение, используя

тег. В сочетании с

  SRC  

Атрибут позволяет указать, откуда вы хотите загрузить изображение.

Еще один важный атрибут

теги это

  альтернативный  

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

Использовать

  ширина  

и

  высота  

элементы, чтобы указать количество пикселей, в которых появляется изображение.

Соберите все это вместе, и тег изображения будет выглядеть так:

Шаг 5: Добавление ссылок

Всемирная паутина не была бы такой же сетью без ссылок на другие страницы. Используя