HTML означает язык разметки гипертекста. Он используется для создания структуры наших веб-страниц. Раньше он использовался для создания документов, которые отображались в виде веб-страниц. Его цель до сих пор не изменилась, но теперь это гораздо больше, чем просто создание документов. Это один из трех основных языков, используемых в веб-разработке.
Вот эти три языка:
- HTML
- CSS
- JavaScript
- Все они имеют разные цели и функции, которые объединены для создания единого веб-сайта. Думайте о веб-сайте как о человеческом теле, HTML будет его скелетом, CSS будет его внешними функциями, а JavaScript будет всей внутренней функциональностью!
HTML-элементы:
Элементы HTML являются основными блоками веб-документа. Различные элементы имеют разные свойства и в сочетании с другими элементами могут привести к изменению результатов.
В этом разделе мы узнаем об основах HTML. Элементы, которые мы рассмотрим:
Основной шаблон HTML.Это базовый HTML-документ.
<!DOCTYPE html> means that document type is html. After that is the html tag with lang attribute in it showing that the language is English. <head> tag is used to give information about the web page.It contains many meta elements showing which character set to use and what should be the content width. <title> tag is used to show the title of the page ( usually the one written on the opened tab button) </> indicates the closing of a tag. <body> represents the body of the web page. <!-- This is a basic html structure --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
Текст (отображение текста на веб-странице):
in the <body> tag you can see different elements used such as <p> representing a paragraph and <h1> representing a heading with 1 being the a bigger font and 6 being the smallest.Although keep in mind that its not a matter of size (size can always be changed using css) , headings are used according to the importance of the content.It is preferred that we use only one <h1> heading so that search engines can easily figure out what the content is about ! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>This is a web page</p> <h1>This is a html document</h1> <h3>This is a beginners guide </h3> </body> </html>
Примечание. Если вы совсем новичок и не знаете, как вывести результат, все, что вам нужно сделать, это открыть html-документ с помощью веб-браузера.
Объекты. Некоторые символы зарезервированы в HTML, поэтому для их отображения нам необходимо использовать специальную запись. Предположим, мы хотим отобразить на веб-странице фразу Я люблю ‹html›. Когда мы пишем это в теге ‹p› редактор путает его с элементом ‹html›, который является другим тегом. Итак, чтобы решить эту проблему, мы используем html-объекты.
The & sign is used , lt stands for less than. > means greater than. There are many other entites we can use.You can look up for them if you want to, but we rarely use them.
Гиперссылки. Почти все веб-страницы в Интернете содержат ссылки на другие страницы. Чтобы добавить эти ссылки на нашу веб-страницу, мы используем элемент привязки или ‹a href="» › . Каждый элемент привязки должен иметь атрибут href или гипертекстовой ссылки.
What this code does is it creates a word named google and when you click on it , the google search page is opened. target="_blank" attribute means the page will open in a new tab. If we don't use this attribute the page will open in the current tab. </head> <body> <a href="https://www.google.com" target="_blank">Google</a> </body> </html>
Мы можем использовать этот элемент для создания ссылки между разными страницами нашего веб-сайта, т. е. главной страницей, страницей о странице…
Встраивание изображений. Элемент ‹img› используется для добавления или ссылки на изображения на нашем веб-сайте. Он включает в себя атрибут src или source и alt или альтернативу (текст, который будет отображаться, если изображения недоступны).
</head> <body> <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google logo"> </body> </html>