Про мышей

Структура HTML файла

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

Далее будут рассмотрены примеры содержания HTML файлов. Если вы не знаете, как создать HTML файл, то посмотрите статью «Как создать HTML файл».

Существует большое количество тегов, часть из которых мы постараемся разобрать в курсе.

Рассмотрим пример упрощённого HTML файла, страницы сайта:

   Свойства страницы, правила отображения, стили, скрипты, подключаемые файлы Содержание страницы 

Всё, что написано латиницей и заключено в скобки — это теги. Разберём пример по сторкам:

— эта строчка говорит о том, что документ является html файлом. Следовательно, браузер сможет показать его как html страницу.

. — это парный тег (у него есть открывающая часть и закрывающая , которые различаются наличием слеша «/«). Внутри него заключено всё тело html документа.

. — всё, что находится внутри этого тега не выводится на экран. Но в нём содержится важная информация, которая поможет браузеру правильно показать страницу. К примеру, в этом теге могут находиться указание кодировки и языка страницы, правила отображения, стили и скрипты.

. — этот тег, внутри которого находится отображаемая область страницы.

Пример html страницы

Теперь разберём усложнённый пример html страницы, в котором будут добавлены несколько дополнительных тегов относительно предыдущего примера:






Тише, мыши, кот на крыше,

а котята ещё выше.

Кот пошёл за молоком,

а котята кувырком.

Кот пришёл без молока,

а котята ха-ха-ха.

Относительно предыдущего примера в новом появилось несколько изменений: во второй строке стоит . У этого тега появился атрибут lang=»ru». Обратите внимание, что атрибут ставится внутри скобок тега . Как можно догадаться из названия, он указывает на то, что страница использует русский язык. Современные браузеры практически все могут безошибочно определить язык, поэтому в этом атрибуте нет особой необходимости, но привели его в качестве примера атрибута, которым может обладать тег.

Второе изменение касается содержания тега . . Здесь в первой строчке появилось указание на кодировку текста . Тег «meta» называется метатегом.

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

В блоке . также появилась строчка . Этот тег указывает, какой заголовок будет у страницы браузера (у вкладки).

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

Ради практики создайте файл на своём компьютере с любым названием и расширением «.html». К примеру, «page.html». Затем откройте его любым текстовым редактором и вставьте в него код из примера выше. Сохраните файл. Кликните на файл два раза и он откроется в браузере. Теперь измените что-либо в файле, сохраните и перезагрузите страницу в браузере.

Комментарии в HTML коде

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

Источник

Parts of html file

What is an HTML file?

HTML (Hyper Text Markup Language) is the extension for web pages created for display in browsers. Known as language of the web, HTML has evolved with requirements of new information requirements to be displayed as part of web pages. The latest variant is known as HTML 5 that gives a lot of flexibility for working with the language. HTML pages are either received from server, where these are hosted, or can be loaded from local system as well. Each HTML page is made up of HTML elements such as forms, text, images, animations, links, etc. These elements are represented by tags and several others where each tag has start and end. It can also embed applications written in scripting languages such as JavaScript and Style Sheets (CSS) for overall layout representation.

Brief History

Since its inception and first role out, the HTML specifications have been maintained by World Wide Web Consortium (W3C) since 1996. In 2000, it also became an international standard (ISO/IEC 15445:2000). In 1999, HTML 4.01 was published. In 2004, the Web Hypertext Application Technology Working Group (WHATWG) started working on the HTML5 version which became a joint deliverable with the W3C in 2008. It was completed and standardized on 28 Oct 2014.

HTML File Format Structure

An HTML 4 document is composed of three parts:

  1. a line containing HTML version information
  2. a declarative header section
  3. a body, which contains the document’s actual content. The body may be implemented by the BODY element or the FRAMESET element to contain the body in frames

Each section can be lead or followed by white spaces, newlines, tabs and comments. An example of a simple HTML document is as shown below:

   Understanding HTML File Format  Hello World!  

Version Information

The first line of code, , is called a doctype declaration and tells the browser which version of HTML the page is written in. Depending upon the version of HTML, there are a number of different doctype declarations that names the document type definition (DTD) in use for the document. Each DTD differs from other in the elements it supports and differ as follow:

  • HTML 4.01 Strict — includes all elements and attributes that have not been deprecated or do not appear in frameset documents
  • HTML 4.01 Transitional — includes everything in the strict DTD plus deprecated elements and attributes (most of which concern visual presentation
  • HTML 4.01 Frameset — includes everything in the transitional DTD plus frames as well

For HTML5, the version information is simply as mentioned below.

HTML Header Information

Header of an HTML document can include a number of HTML elements that are not rendered by the browser. Such elements are either metadata that describe information about the page or includes sections that are used to fetch information from external resources like CSS stylesheets or JavaScript files. Header of a page is represented by the head tag.

For setting page title, the title element is the only one that is required within the tags. The same is used by Search engines to identify the title of a page.

HTML Body Information

This is the main section in the file that contains all the contents of the file that are rendered by browsers. Html body can contain markups that can refer to various building blocks in the shape of tags. It can contain several different types of information like text, images, colors, graphics, etc. In addition, audio and video elements can also be embedded in html body for rendering by browsers. In presence of modern style sheets application for visual representation, the presentation attributes of BODY such as background color, link color, text color, etc. have been deprecated. Thus, the same effects can be achieved using stylesheets as shown below:

   Inline Style Sheets referencing BODY < background: white; color: black>A:link < color: red >A:visited < color: maroon >A:active . document body.  

Inline style sheets are easy to embed and for quick applications to the visual effects, external style sheets make it more convenient to deploy once and access at many places.

   Linking to External style sheets  . document body.  

HTML Elements

As mentioned earlier, contents inside HTML Body are represented by tags, also known as Html Elements. Each tag can have additional information in the form of attributes which are written as , though it is not necessary to have attributes with every tag. If attributes are not mentioned, default values are used in each case. Following are some of the Element examples:

Header
Headings

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Paragraphs
References

See Also

Источник

HTML Course | Structure of an HTML Document

As we all know HTML is a language of the web. It’s used to design the web pages or we can say structure the page layouts of a website. HTML stands for HYPERTEXT MARKUP LANGUAGE, as its full form suggests it’s not any programming language, a markup language. So, while the execution of HTML code we can’t face any such error. In real HTML code wasn’t compiled or interpreted because HTML code was rendered by the browser. which is similar to the compilation of a program. Html content is parched through the browser to display the content of HTML.

Course Navigation

HTML DOCUMENTS STRUCTURE

Html used predefined tags and attributes to tell the browser how to display content, means in which format, style, font size, and images to display. Html is a case insensitive language. Case insensitive means there is no difference in upper case and lower case ( capital and small letters) both treated as the same, for r example ‘D’ and ‘d’ both are the same here.
There are generally two types of tags in HTML:

  1. Paired Tags: These tags come in pairs. That is they have both opening(< >) and closing() tags.
  2. Empty Tags: These tags do not require to be closed.

Below is an example of a () tag in HTML, which tells the browser to bold the text inside it.

Tags and attributes: Tags are individuals of html structure, we have to open and close any tag with a forward slash like this . There are some variations with the tag some of them are self-closing tag which isn’t required to close and some are empty tag where we can add any attributes in it. Attributes are additional properties of html tags that define the property of any html tags. i.e. width, height, controls, loops, input, and autoplay. These attributes also help us to store information in meta tags by using name, content, and type attributes. Html documents structured mentioned below:

An HTML Document is mainly divided into two parts:

  • HEAD: This contains the information about the HTML document. For Example, the Title of the page, version of HTML, Meta Data, etc.
  • BODY: This contains everything you want to display on the Web Page.

Let us now have a look at the basic structure of HTML. That is the code that is a must for every webpage to have:

HTML

Every Webpage must contain this code. Below is the complete explanation of each of the tags used in the above piece of HTML code:
: This tag is used to tells the HTML version. This currently tells that the version is HTML 5.0
: is a root element of html. It’s a biggest and main element in complete html language, all the tags , elements and attributes enclosed in it or we can say wrap init , which is used to structure a web page. tag is parent tag of and tag , other tags enclosed within and . In tag we use “lang” attributes to define languages of html page such as here en represents English language. some of them are : es = Spanish , zh-Hans = Chinese, fr= french and el= Greek etc.
: Head tag contains metadata, title, page CSS etc. Data stored in the tag is not displayed to the user, it is just written for reference purposes and as a watermark of the owner.

 Note: for better understanding refer above code of html. = to store website name or content to be displayed. = To add/ link css( cascading style sheet) file. = 1. to store data about website, organisation , creator/ owner 2. for responsive website via attributes 3. to tell compatibility of html with browser = to add javascript file.

: A body tag is used to enclose all the data which a web page has from texts to links. All the content that you see rendered in the browser is contained within this element. Following tags and elements used in the body.

1 . , , to
2.

3. and
4. , and
5.
,

    and
    .
    6. , , and
    7. , and.
    8.
    9. and others……….
    To learn more about an HTML Document structure, please visit:

HTML is the foundation of web pages, and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

Источник

Читайте также:  Byte short int long float double in java
Оцените статью