HTML5. Chapter 3: HTML for Content Structure презентация

Overview and Objectives
Discuss briefly the history of HTML and how we got to HTML5
Stress the importance of maintaining both a conceptual and a physical separation between the structure and presentation of a web page
Discuss HTML tags and elements
Discuss the basic structure of every web page
Discuss the HTML5 DOCTYPE declaration and web page validation
Discuss and illustrate all of the usual basic HTML markup, including headings, paragraphs, line breaks, lists, tables, images, comments, attributes and entities

What Is HTML?
Hypertext Markup Language
A markup language, not a programming language
Uses markers called “tags” to designate the structural elements of a web page, such as:
headings
paragraphs
lists

Summary of HTML Versions
HTML (1990) Tim Berners-Lee
HTML 2 (1992)
HTML 3.2 (1996)
HTML 4 (1997) and HTML 4.01 (1999)
XHTML 1.0 (2000) and XHTML 1.1 (2001)
XHTML 2.0 (work discontinued by 2010)
HTML5 (Fall, 2014)

HTML for Structure Only
Right up front we need to make these high-level distinctions:
HTML’s job is to describe the structure of a web page
Web page presentation is the job of Cascading Style Sheets (CSS)
Web page behavior is the job of JavaScript

A Typical HTML Tag and Element
Here is an HTML paragraph element:
This is a paragraph.
is the opening tag of the element.
is the closing tag of the element.
This is a paragraph. is the content of the element.
Sometimes we refer to the “tag pair”
…
.
Sometimes we refer to the “p tag” or simply a
“p element”.

Browser Display of HTML Elements
Every browser will have its own default way of displaying any HTML element.
For a paragraph this might include space before and after the text, and the text font.
Browsers also have certain “default behaviors”:
Reducing multiple spaces between words to a single space and removing leading and trailing spaces from element content
Wrapping lines as the browser window changes size

Basic Structure of Every Web Page
My Title
where
page content to display will go.--> where
page content to display will go.-->

Some Basic Markup Tags
h1, h2, h3, h4, h5, h6 for headings
p for paragraphs
ul for unordered lists (• marker by default)
ol for ordered lists (numbered 1, 2, 3 … by default)
li for list items in an ordered or unordered list

Basic HTML Markup Illustrated:
first.html
Nature's Source
Welcome to the Website of Nature's Source
This is our first foray onto the World Wide Web.
We are a small company dedicated to the health
of our customers through natural remedies.
We have a wide range of products that include:
- books, and multimedia documents that help you get
healthy and stay healthy
- herbal medicines
- equipment for injury free body toning exercises

Basic HTML Markup Displayed:
first.html
Note how the text from the file loses its formatting when displayed in the browser
Figure 3.2 graphics/ch03/displayFirstHtml.jpg.

Empty Elements: br for Line Breaks and hr for a Horizontal Dividing Line
Not all elements have content.
Elements with no content are called “empty elements” and have a special syntax.
The line break element
is one of these.
It causes the following text to appear on the next line but with no additional spacing.
It has just a single tag (that is, an opening tag but no closing tag).

More HTML Markup Illustrated: second.html
Nature's Source
Welcome to the Website of Nature's Source!
This is our first foray onto the World Wide Web. We are a small
company dedicated to the health of our customers through natural
remedies.
We have a wide range of products that include:
books, and multimedia documents that help you get healthy and
stay healthy
herbal medicines
equipment for injury free body toning exercises

More HTML Markup Displayed: second.html
Figure 3.4 graphics/ch03/displaySecondHtml.jpg.

What Is a “Valid” Web Page?
A valid web page is one that conforms to one of several possible standards.
The standard against which the page will be validated is determined by a DOCTYPE declaration in the web page.
We use this (HTML5) DOCTYPE declaration as the first line of a file:

Some HTML “Boilerplate”
The term boilerplate refers to markup that we can use “as is” on every page, and we need some when we attempt to validate a web page.
The first boilerplate item is the DOCTYPE itself.
The second is the attribute of the html tag:
lang="en"
The third is the (empty) meta element within head element:

HTML5 Markup Guidelines
Use lowercase for all tag names.
Ensure all tag pairs are properly nested.
Give any non-empty element both an opening tag and a closing tag.
Use lowercase for attribute names and enclose attribute values in quotes.
Remember: block elements may contain block or inline elements; inline elements contain only other inline elements.

HTML5 Markup Best Practice
Make sure your page has the HTML5 DOCTYPE and all of these HTML elements in their correct order, properly nested:
html
head
meta
title
body
Don’t use any elements that are deprecated by the DOCTYPE against which you are validating.

A Simple Valid Web Page: third.html
Nature's Source
Welcome to the Website of Nature's Source!
This is our first foray onto the World Wide Web. We are a small
company dedicated to the health of our customers through natural
remedies.
We have a wide range of products that include:
books, and multimedia documents that help you get healthy and
stay healthy
herbal medicines
equipment for injury free body toning exercises

How Do We Validate a Web Page?
You can find a number of HTML validators on the web. The W3C itself provides this one: http://validator.w3.org/
You can enter the URL of the page you want validated directly into the validator and click
on a button to validate it.
Many other ways are possible: For example, the Firefox Web Developer add-on lets you validate the web page you are viewing from a dropdown menu.

Validating third.html
Figure 3.6 graphics/ch03/displayThirdHtmlToValidate.jpg.

Validation Report for third.html
Figure 3.7 graphics/ch03/displayThirdHtmlValidated.jpg.

The Web Developer Add-on
Figure 3.8 graphics/ch03/WebDeveloper.jpg.

The Empty img Element for Images,
and Two Required Tag Attributes
The (empty) img element lets us place an image on a web page.
A typical image element:
src and alt are called attributes.
The value of src is the location of the image file.
The value of alt is the text to display if no image.
Attribute values are enclosed in quotes.

A Best Practice for Images
A pixel is a very small area of illumination on a display screen—one of many from which an image is composed.
The img tag has two optional attributes, width and height, whose values in number of pixels give the size of an image.
A browser will scale the image to that size, but it is better to make the image the size you want in an external program and then specify the exact size in your img tag. Then … no scaling required.

Block Elements vs. Inline Elements
Some HTML elements are block elements, others are inline elements.
Block elements (headings, paragraphs and lists, for example) flow from top to bottom of a web page, with a browser-dependent amount of vertical whitespace before and after the element.
Inline elements (the img element, for example) flow from left to right, wrapping to the next line as necessary, with no horizontal spacing surrounding the element.

Tables in General
Tables have rows and columns.
Tables are best used to display data that lends itself to rows and columns.
Example: A table of 28 temperatures with 4 rows (weeks) and 7 columns (week days)
A table can be used to lay out a very simple web page, but Cascading Style Sheets are much preferred for web page layout.

HTML Basic Table Elements
A table element with two rows and two columns (two table data cells) in each row:
top-left
top-right
top-left
top-right

Additional Table Features
Content of a td (table data) element is displayed left-justified by default.
Content of a th (table header) element is displayed bold and centered by default.
td and th tags can take/have rowspan="n" and colspan="n" attributes to permit one cell to span multiple rows and/or columns.
Place a caption element after the opening table tag to give a table a caption.

Simple Table Layout in
index.html from nature1
(two rows and two columns)
Figure 3.10 graphics/ch03/nature1/displayIndexHtml.jpg.

ch03/nature1/index.html
Nature's Source - Canada's</div></h3></h3><!----><!----><div class="slides-content">largest specialty vitamin store
width="608" height="90">
5029 Hurontario Street Unit 2
Mississauga, ON L4Z 3X7
Tel: [phone]
Fax: [phone]
Welcome to Nature's Source - Protecting your health
naturally!
Founded in 1998, Nature's Source was created …/p>
width="256" height="256">

What Is an HTML Entity?
Some characters have a special meaning in HTML (< starts an opening tag, for example).
So, for example, in small
tag in a big element.
This problem is solved by this HTML entity:
<
A browser replaces the entity < with the single character <.

HTML Entities
Characters that need replacing by entities are often called metacharacters.
Entities can also provide special characters not appearing on keyboards.
Some additional HTML entities:
> for >
& for &
© for © (the copyright symbol)

HTML Hyperlinks
A central idea of the web is that one page can link to one or many others.
The a (anchor) element provides the hyperlink (link).
The value of the (required) href attribute of an a tag is the URL or path to the other page.
A typical a element:
e-store
By default content like e-store appears with blue and underlined text.
The content of an a element can be an img element.

Simple Table Layout in
index.html from nature2
(four rows and five columns)
(and now including “menu item” links)
Figure 3.12 graphics/ch03/nature2/displayIndexHtml.jpg.

ch03/nature2/index.html
(1 of 2)
Nature's Source</div></h3></h3><!----><!----><div class="slides-content">- Canada's largest specialty vitamin store
Имя файла: HTML5.-Chapter-3:-HTML-for-Content-Structure.pptx
Количество просмотров: 91
Количество скачиваний: 0
Скачать
- Предыдущая
Криминология: понятие, предмет, метод, цели, задачи, функции, система, методология
Следующая -
Дүниежүзілік қоршаған ортаны қорғау
Похожие презентации
Новый SEO-аудит 2017
Алгоритмы с возвращением, их реализация с помощью рекурсий и динамических структур
Верстка і що для цього потрібно
Принципы IP - телефонии
Лекция 2. Основные компоненты ГИС
Основы логики
Технічна експлуатація автоматизованих систем поштового зв’язку
Модель OSI. Сети доступа. Лекция 3
Арифметика в системах счисления
принципы построения и функционирования компьютерных сетей 3-курс
Git python core
Прикладная среда табличного процессора EXCEL
Резервное копирование и восстановление данных
Устройства компьютера
Выбор расположения клиентской точки Wi Fi для лучшего покрытия сети
Вычислительная система. Программное обеспечение. Архитектурные особенности модели микропроцессорной системы. (Тема 1.2.4)
Створення реляційної бази даних. Лекція № 6
What’s the Internet
Безопасность web-приложений
Интерфейс ОС (1)
Дополнительные типы данных в Python. Множества, кортежи, словари
Системы автоматизированного проектирования и производства
Типы алгоритмов
Информационно-коммуникационные технологии в образовательной деятельности
Load Balancing and Termination Detection
Дыбыстық ақпаратты өңдеу. Дыбыс жазу
Алгоритмы и структуры данных
Управление компьютером
Обратная связь
Email:
Нажмите что бы посмотреть
width="608" height="90">
Home
e-store
Products+Services
Your Health
About Us
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q){return {data:{meta:{result:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F}},item:{result:{id:5716,name:k,category:G,count:38,jpg:"jpg\u002F5716",hits:91,download:b,h1:"HTML5. Chapter 3: HTML for Content Structure презентация",meta:{h1:k,title:k,description:"HTML5. Chapter 3: HTML for Content Structure презентация на тему, доклад, Информатика",keywords:"HTML5. Chapter 3: HTML for Content Structure, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему HTML5. Chapter 3: HTML for Content Structure из раздела Информатика. Презентация на заданную тему содержит 38 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EOverview and Objectives\u003Cbr\u003E\u003Cp\u003EDiscuss briefly the history of HTML and how we got to HTML5\u003Cbr\u003EStress the importance of maintaining both a conceptual and a physical separation between the structure and presentation of a web page\u003Cbr\u003EDiscuss HTML tags and ",file:"HTML5.-Chapter-3:-HTML-for-Content-Structure.pptx",texts:["\u003Cp\u003EChapter 3: HTML for Content Structure\u003Cbr\u003E","\u003Cp\u003EOverview and Objectives\u003Cbr\u003E\u003Cp\u003EDiscuss briefly the history of HTML and how we got to HTML5\u003Cbr\u003EStress the importance of maintaining both a conceptual and a physical separation between the structure and presentation of a web page\u003Cbr\u003EDiscuss HTML tags and elements\u003Cbr\u003EDiscuss the basic structure of every web page\u003Cbr\u003EDiscuss the HTML5 DOCTYPE declaration and web page validation\u003Cbr\u003EDiscuss and illustrate all of the usual basic HTML markup, including headings, paragraphs, line breaks, lists, tables, images, comments, attributes and entities\u003Cbr\u003E","\u003Cp\u003EWhat Is HTML?\u003Cbr\u003E\u003Cp\u003EHypertext Markup Language\u003Cbr\u003EA markup language, not a programming language\u003Cbr\u003EUses markers called “tags” to designate the structural elements of a web page, such as:\u003Cbr\u003Eheadings\u003Cbr\u003Eparagraphs\u003Cbr\u003Elists\u003Cbr\u003E","\u003Cp\u003ESummary of HTML Versions\u003Cbr\u003E\u003Cp\u003EHTML (1990) Tim Berners-Lee\u003Cbr\u003EHTML 2 (1992)\u003Cbr\u003EHTML 3.2 (1996)\u003Cbr\u003EHTML 4 (1997) and HTML 4.01 (1999)\u003Cbr\u003EXHTML 1.0 (2000) and XHTML 1.1 (2001)\u003Cbr\u003EXHTML 2.0 (work discontinued by 2010)\u003Cbr\u003EHTML5 (Fall, 2014)\u003Cbr\u003E","\u003Cp\u003EHTML for Structure Only\u003Cbr\u003E\u003Cp\u003ERight up front we need to make these high-level distinctions:\u003Cbr\u003EHTML’s job is to describe the structure of a web page\u003Cbr\u003EWeb page presentation is the job of Cascading Style Sheets (CSS)\u003Cbr\u003EWeb page behavior is the job of JavaScript\u003Cbr\u003E","\u003Cp\u003EA Typical HTML Tag and Element\u003Cbr\u003E\u003Cp\u003EHere is an HTML paragraph element:\r\n\u003Cp\u003EThis is a paragraph.\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E is the opening tag of the element.\u003Cbr\u003E\u003C\u002Fp\u003E is the closing tag of the element.\u003Cbr\u003EThis is a paragraph. is the content of the element.\u003Cbr\u003ESometimes we refer to the “tag pair” \u003Cp\u003E…\u003C\u002Fp\u003E.\u003Cbr\u003ESometimes we refer to the “p tag” or simply a \r\n“p element”.\u003Cbr\u003E","\u003Cp\u003EBrowser Display of HTML Elements\u003Cbr\u003E\u003Cp\u003EEvery browser will have its own default way of displaying any HTML element.\u003Cbr\u003EFor a paragraph this might include space before and after the text, and the text font.\u003Cbr\u003EBrowsers also have certain “default behaviors”:\u003Cbr\u003EReducing multiple spaces between words to a single space and removing leading and trailing spaces from element content\u003Cbr\u003EWrapping lines as the browser window changes size\u003Cbr\u003E","\u003Cp\u003EBasic Structure of Every Web Page\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E\u003Chtml\u003E\u003Cbr\u003E\u003Chead\u003E\u003Cbr\u003E \u003Ctitle\u003EMy Title\u003C\u002Ftitle\u003E\u003Cbr\u003E\u003C\u002Fhead\u003E\u003Cbr\u003E\u003Cbody\u003E\u003Cbr\u003E \u003C!--An HTML comment showing where\u003Cbr\u003E page content to display will go.--\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003ESome Basic Markup Tags\u003Cbr\u003E\u003Cp\u003Eh1, h2, h3, h4, h5, h6 for headings\u003Cbr\u003Ep for paragraphs\u003Cbr\u003Eul for unordered lists (• marker by default)\u003Cbr\u003Eol for ordered lists (numbered 1, 2, 3 … by default)\u003Cbr\u003Eli for list items in an ordered or unordered list\u003Cbr\u003E","\u003Cp\u003EBasic HTML Markup Illustrated:\r\nfirst.html\u003Cbr\u003E\u003Cp\u003E\u003Chtml\u003E\u003Cbr\u003E\u003Chead\u003E\u003Cbr\u003E\u003Ctitle\u003ENature's Source\u003C\u002Ftitle\u003E\u003Cbr\u003E\u003C\u002Fhead\u003E\u003Cbr\u003E\u003Cbody\u003E\u003Cbr\u003E\u003Ch1\u003E\u003Cbr\u003EWelcome to the Website of Nature's Source\u003Cbr\u003E\u003C\u002Fh1\u003E\u003Cbr\u003EThis is our first foray onto the World Wide Web.\u003Cbr\u003EWe are a small company dedicated to the health\u003Cbr\u003Eof our customers through natural remedies.\u003Cbr\u003EWe have a wide range of products that include:\u003Cbr\u003E - books, and multimedia documents that help you get\u003Cbr\u003E healthy and stay healthy\u003Cbr\u003E - herbal medicines\u003Cbr\u003E - equipment for injury free body toning exercises\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003EBasic HTML Markup Displayed:\r\nfirst.html\u003Cbr\u003E\u003Cp\u003ENote how the text from the file loses its formatting when displayed in the browser \u003Cbr\u003E\u003Cp\u003EFigure 3.2 graphics\u002Fch03\u002FdisplayFirstHtml.jpg.\u003Cbr\u003E","\u003Cp\u003EEmpty Elements: br for Line Breaks and hr for a Horizontal Dividing Line\u003Cbr\u003E\u003Cp\u003ENot all elements have content.\u003Cbr\u003EElements with no content are called “empty elements” and have a special syntax.\u003Cbr\u003EThe line break element \u003Cbr\u003E is one of these.\u003Cbr\u003EIt causes the following text to appear on the next line but with no additional spacing.\u003Cbr\u003EIt has just a single tag (that is, an opening tag but no closing tag).\u003Cbr\u003E","\u003Cp\u003EMore HTML Markup Illustrated: second.html\u003Cbr\u003E\u003Cp\u003E\u003C!-- second.html --\u003E\u003Cbr\u003E\u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Ctitle\u003ENature's Source\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E \u003Ch1\u003EWelcome to the Website of Nature's Source!\u003C\u002Fh1\u003E\u003Cbr\u003E \u003Cp\u003EThis is our first foray onto the World Wide Web. We are a small\u003Cbr\u003E company dedicated to the health of our customers through natural\u003Cbr\u003E remedies.\u003Cbr\u003E \u003Cbr\u003E We have a wide range of products that include:\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cul\u003E\u003Cbr\u003E \u003Cli\u003Ebooks, and multimedia documents that help you get healthy and\u003Cbr\u003E stay healthy\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003Eherbal medicines\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003Eequipment for injury free body toning exercises\u003C\u002Fli\u003E\u003Cbr\u003E \u003C\u002Ful\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003EMore HTML Markup Displayed: second.html\u003Cbr\u003E\u003Cp\u003EFigure 3.4 graphics\u002Fch03\u002FdisplaySecondHtml.jpg.\u003Cbr\u003E","\u003Cp\u003EWhat Is a “Valid” Web Page?\u003Cbr\u003E\u003Cp\u003EA valid web page is one that conforms to one of several possible standards.\u003Cbr\u003EThe standard against which the page will be validated is determined by a DOCTYPE declaration in the web page.\u003Cbr\u003EWe use this (HTML5) DOCTYPE declaration as the first line of a file:\r\n\u003C!DOCTYPE html\u003E\u003Cbr\u003E","\u003Cp\u003ESome HTML “Boilerplate”\u003Cbr\u003E\u003Cp\u003EThe term boilerplate refers to markup that we can use “as is” on every page, and we need some when we attempt to validate a web page.\u003Cbr\u003EThe first boilerplate item is the DOCTYPE itself.\u003Cbr\u003EThe second is the attribute of the html tag:\r\nlang=\"en\"\u003Cbr\u003EThe third is the (empty) meta element within head element:\r\n\u003Cmeta charset=\"utf-8\"\u003E\u003Cbr\u003E","\u003Cp\u003EHTML5 Markup Guidelines\u003Cbr\u003E\u003Cp\u003EUse lowercase for all tag names.\u003Cbr\u003EEnsure all tag pairs are properly nested.\u003Cbr\u003EGive any non-empty element both an opening tag and a closing tag.\u003Cbr\u003EUse lowercase for attribute names and enclose attribute values in quotes.\u003Cbr\u003ERemember: block elements may contain block or inline elements; inline elements contain only other inline elements.\u003Cbr\u003E","\u003Cp\u003EHTML5 Markup Best Practice\u003Cbr\u003E\u003Cp\u003EMake sure your page has the HTML5 DOCTYPE and all of these HTML elements in their correct order, properly nested:\u003Cbr\u003Ehtml\u003Cbr\u003E\thead\u003Cbr\u003E\t meta\u003Cbr\u003E\t title\u003Cbr\u003E\tbody\u003Cbr\u003EDon’t use any elements that are deprecated by the DOCTYPE against which you are validating.\u003Cbr\u003E","\u003Cp\u003EA Simple Valid Web Page: third.html\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E\u003C!-- third.html --\u003E\u003Cbr\u003E\u003Chtml lang=\"en\"\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"utf-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003ENature's Source\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E \u003Ch1\u003EWelcome to the Website of Nature's Source!\u003C\u002Fh1\u003E\u003Cbr\u003E \u003Cp\u003EThis is our first foray onto the World Wide Web. We are a small\u003Cbr\u003E company dedicated to the health of our customers through natural\u003Cbr\u003E remedies.\u003Cbr\u003E \u003Cbr\u003E We have a wide range of products that include:\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cul\u003E\u003Cbr\u003E \u003Cli\u003Ebooks, and multimedia documents that help you get healthy and\u003Cbr\u003E stay healthy\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003Eherbal medicines\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003Eequipment for injury free body toning exercises\u003C\u002Fli\u003E\u003Cbr\u003E \u003C\u002Ful\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003EHow Do We Validate a Web Page?\u003Cbr\u003E\u003Cp\u003EYou can find a number of HTML validators on the web. The W3C itself provides this one: http:\u002F\u002Fvalidator.w3.org\u002F\u003Cbr\u003EYou can enter the URL of the page you want validated directly into the validator and click\r\non a button to validate it.\u003Cbr\u003EMany other ways are possible: For example, the Firefox Web Developer add-on lets you validate the web page you are viewing from a dropdown menu.\u003Cbr\u003E","\u003Cp\u003EValidating third.html\u003Cbr\u003E\u003Cp\u003EFigure 3.6 graphics\u002Fch03\u002FdisplayThirdHtmlToValidate.jpg.\u003Cbr\u003E","\u003Cp\u003EValidation Report for third.html\u003Cbr\u003E\u003Cp\u003EFigure 3.7 graphics\u002Fch03\u002FdisplayThirdHtmlValidated.jpg.\u003Cbr\u003E","\u003Cp\u003EThe Web Developer Add-on\u003Cbr\u003E\u003Cp\u003EFigure 3.8 graphics\u002Fch03\u002FWebDeveloper.jpg.\u003Cbr\u003E","\u003Cp\u003EThe Empty img Element for Images,\r\nand Two Required Tag Attributes\u003Cbr\u003E\u003Cp\u003EThe (empty) img element lets us place an image on a web page.\u003Cbr\u003EA typical image element:\r\n\u003Cimg src=\"images\u002Fnaturelogo.gif\"\r\n alt=\"Nature′s Source Logo\"\u003E\u003Cbr\u003Esrc and alt are called attributes.\u003Cbr\u003EThe value of src is the location of the image file.\u003Cbr\u003EThe value of alt is the text to display if no image.\u003Cbr\u003EAttribute values are enclosed in quotes.\u003Cbr\u003E","\u003Cp\u003EA Best Practice for Images\u003Cbr\u003E\u003Cp\u003EA pixel is a very small area of illumination on a display screen—one of many from which an image is composed.\u003Cbr\u003EThe img tag has two optional attributes, width and height, whose values in number of pixels give the size of an image.\u003Cbr\u003EA browser will scale the image to that size, but it is better to make the image the size you want in an external program and then specify the exact size in your img tag. Then … no scaling required.\u003Cbr\u003E","\u003Cp\u003EBlock Elements vs. Inline Elements\u003Cbr\u003E\u003Cp\u003ESome HTML elements are block elements, others are inline elements.\u003Cbr\u003EBlock elements (headings, paragraphs and lists, for example) flow from top to bottom of a web page, with a browser-dependent amount of vertical whitespace before and after the element.\u003Cbr\u003EInline elements (the img element, for example) flow from left to right, wrapping to the next line as necessary, with no horizontal spacing surrounding the element.\u003Cbr\u003E","\u003Cp\u003ETables in General\u003Cbr\u003E\u003Cp\u003ETables have rows and columns.\u003Cbr\u003ETables are best used to display data that lends itself to rows and columns.\u003Cbr\u003EExample: A table of 28 temperatures with 4 rows (weeks) and 7 columns (week days)\u003Cbr\u003EA table can be used to lay out a very simple web page, but Cascading Style Sheets are much preferred for web page layout.\u003Cbr\u003E","\u003Cp\u003EHTML Basic Table Elements\u003Cbr\u003E\u003Cp\u003EA table element with two rows and two columns (two table data cells) in each row:\r\n\u003Ctable summary=\"A simple table\"\u003E\r\n \u003Ctr\u003E\r\n \u003Ctd\u003Etop-left\u003C\u002Ftd\u003E\u003Ctd\u003Etop-right\u003C\u002Ftd\u003E\r\n \u003C\u002Ftr\u003E\r\n \u003Ctr\u003E\r\n \u003Ctd\u003Etop-left\u003C\u002Ftd\u003E\u003Ctd\u003Etop-right\u003C\u002Ftd\u003E\r\n \u003C\u002Ftr\u003E\r\n\u003C\u002Ftable\u003E\u003Cbr\u003E","\u003Cp\u003EAdditional Table Features\u003Cbr\u003E\u003Cp\u003EContent of a td (table data) element is displayed left-justified by default.\u003Cbr\u003EContent of a th (table header) element is displayed bold and centered by default.\u003Cbr\u003Etd and th tags can take\u002Fhave rowspan=\"n\" and colspan=\"n\" attributes to permit one cell to span multiple rows and\u002For columns.\u003Cbr\u003EPlace a caption element after the opening table tag to give a table a caption.\u003Cbr\u003E","\u003Cp\u003ESimple Table Layout in \r\nindex.html from nature1 \r\n(two rows and two columns)\u003Cbr\u003E\u003Cp\u003EFigure 3.10 graphics\u002Fch03\u002Fnature1\u002FdisplayIndexHtml.jpg.\u003Cbr\u003E","\u003Cp\u003Ech03\u002Fnature1\u002Findex.html\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E\u003C!-- index.html for ch03\u002Fnature1 --\u003E\u003Cbr\u003E\u003Chtml lang=\"en\"\u003E\u003Cbr\u003E\u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"utf-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003ENature's Source - Canada's largest specialty vitamin store\u003C\u002Ftitle\u003E\u003Cbr\u003E\u003C\u002Fhead\u003E\u003Cbr\u003E\u003Cbody\u003E\u003Cbr\u003E \u003Ctable\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E\u003Cimg src=\"images\u002Fnaturelogo.gif\" alt=\"Nature's Source Logo\"\u003Cbr\u003E width=\"608\" height=\"90\"\u003E\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E5029 Hurontario Street Unit 2\u003Cbr\u003E Mississauga, ON L4Z 3X7\u003Cbr\u003E Tel: [phone]\u003Cbr\u003E Fax: [phone]\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E\u003Cbr\u003E \u003Ch3\u003EWelcome to Nature's Source - Protecting your health\u003Cbr\u003E naturally!\u003C\u002Fh3\u003E\u003Cbr\u003E \u003Cp\u003EFounded in 1998, Nature's Source was created …\u002Fp\u003E\u003Cbr\u003E \u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E\u003Cimg src=\"images\u002Foutdoor4.jpg\" alt=\"Get healthy and stay healthy\"\u003Cbr\u003E width=\"256\" height=\"256\"\u003E\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003C\u002Ftable\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EWhat Is an HTML Entity?\u003Cbr\u003E\u003Cp\u003ESome characters have a special meaning in HTML (\u003C starts an opening tag, for example).\u003Cbr\u003ESo, for example, in small\u003Cbig, “\u003Cbig” would be interpreted as the start of the opening \u003Cbig\u003E tag in a big element.\u003Cbr\u003EThis problem is solved by this HTML entity:\r\n\t&lt;\u003Cbr\u003EA browser replaces the entity &lt; with the single character \u003C.\u003Cbr\u003E","\u003Cp\u003EHTML Entities\u003Cbr\u003E\u003Cp\u003ECharacters that need replacing by entities are often called metacharacters.\u003Cbr\u003EEntities can also provide special characters not appearing on keyboards.\u003Cbr\u003ESome additional HTML entities:\u003Cbr\u003E&gt; for \u003E\u003Cbr\u003E&amp; for &\u003Cbr\u003E&copy; for © (the copyright symbol)\u003Cbr\u003E",a,"\u003Cp\u003EHTML Hyperlinks\u003Cbr\u003E\u003Cp\u003EA central idea of the web is that one page can link to one or many others.\u003Cbr\u003EThe a (anchor) element provides the hyperlink (link).\u003Cbr\u003EThe value of the (required) href attribute of an a tag is the URL or path to the other page.\u003Cbr\u003EA typical a element:\r\n\u003Ca href=\"estore.html\"\u003Ee-store\u003C\u002Fa\u003E\u003Cbr\u003EBy default content like e-store appears with blue and underlined text.\u003Cbr\u003EThe content of an a element can be an img element.\u003Cbr\u003E","\u003Cp\u003ESimple Table Layout in \r\nindex.html from nature2 \r\n(four rows and five columns)\r\n(and now including “menu item” links)\u003Cbr\u003E\u003Cp\u003EFigure 3.12 graphics\u002Fch03\u002Fnature2\u002FdisplayIndexHtml.jpg.\u003Cbr\u003E","\u003Cp\u003Ech03\u002Fnature2\u002Findex.html\r\n(1 of 2)\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E\u003C!-- index.html for ch03\u002Fnature2--\u003E\u003Cbr\u003E\u003Chtml lang=\"en\"\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"utf-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003ENature's Source - Canada's largest specialty vitamin store\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E \u003Ctable\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd colspan=\"5\"\u003E\u003Cbr\u003E \u003Cimg src=\"images\u002Fnaturelogo.gif\" alt=\"Nature's Source\"\u003Cbr\u003E width=\"608\" height=\"90\"\u003E\u003Cbr\u003E \u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E\u003Ca href=\"index.html\"\u003EHome\u003C\u002Fa\u003E\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E\u003Ca href=\"pages\u002Festore.html\"\u003Ee-store\u003C\u002Fa\u003E\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E\u003Ca href=\"pages\u002Fproducts.html\"\u003EProducts+Services\u003C\u002Fa\u003E\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E\u003Ca href=\"pages\u002Fyourhealth.html\"\u003EYour Health\u003C\u002Fa\u003E\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E\u003Ca href=\"pages\u002Fabout.html\"\u003EAbout Us\u003C\u002Fa\u003E\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E","\u003Cp\u003Ech03\u002Fnature2\u002Findex.html\r\n(2 of 2)\u003Cbr\u003E\u003Cp\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd colspan=\"3\"\u003E\u003Cbr\u003E \u003Ch3\u003EWelcome to Nature's Source:\u003Cbr\u003E Protecting your health naturally!\u003C\u002Fh3\u003E\u003Cbr\u003E \u003Cp\u003EFounded in 1998, Nature's Source was created …\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd colspan=\"2\"\u003E\u003Cbr\u003E \u003Cimg src=\"images\u002Foutdoor4.jpg\" alt=\"Get healthy and stay healthy\"\u003Cbr\u003E width=\"256\" height=\"256\"\u003E\u003Cbr\u003E \u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd colspan=\"3\"\u003ENature's Source &copy; 2015 Porter Scobey and Pawan\u003Cbr\u003E Lingras\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E\u003Ca href=\"pages\u002Fcontact.html\"\u003EContact Us\u003C\u002Fa\u003E\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E\u003Ca href=\"pages\u002Fsitemap.html\"\u003ESite Map\u003C\u002Fa\u003E\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003C\u002Ftable\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E"],href:"\u002Finformatika\u002Fhtml5-chapter-3-html-for-content",href_category:"\u002Finformatika",date:1623970193,related:[{id:391278,name:"Новый SEO-аудит 2017",href:"\u002Finformatika\u002Fnovyy-seo-audit-2017",jpg:"jpg\u002F391278"},{id:169741,name:"Алгоритмы с возвращением, их реализация с помощью рекурсий и динамических структур",href:"\u002Finformatika\u002Falgoritmy-s-vozvrashcheniem-ih-realizatsiya-s",jpg:"jpg\u002F169741"},{id:293999,name:"Верстка і що для цього потрібно",href:"\u002Finformatika\u002Fverstka--shcho-dlya-tsogo-potrbno",jpg:"jpg\u002F293999"},{id:400108,name:"Принципы IP - телефонии",href:"\u002Finformatika\u002Fprintsipy-ip-telefonii",jpg:"jpg\u002F400108"},{id:435766,name:"Лекция 2. Основные компоненты ГИС",href:"\u002Finformatika\u002Flektsiya-2-osnovnye-komponenty-gis",jpg:"jpg\u002F435766"},{id:391116,name:"Основы логики",href:"\u002Finformatika\u002Fosnovy-logiki-20",jpg:"jpg\u002F391116"},{id:253973,name:"Технічна експлуатація автоматизованих систем поштового зв’язку",href:"\u002Finformatika\u002Ftehnchna-ekspluatatsya-avtomatizovanih-sistem-poshtovogo-zvyazku",jpg:"jpg\u002F253973"},{id:578800,name:"Модель OSI. Сети доступа. Лекция 3",href:"\u002Finformatika\u002Fmodel-osi-seti-dostupa-lektsiya-3",jpg:"jpg\u002F578800"},{id:187768,name:"Арифметика в системах счисления",href:"\u002Finformatika\u002Farifmetika-v-sistemah-schisleniya-1",jpg:"jpg\u002F187768"},{id:395562,name:"принципы построения и функционирования компьютерных сетей 3-курс",href:"\u002Finformatika\u002Fprintsipy-postroeniya-i-funktsionirovaniya-kompyuternyh-setey",jpg:"jpg\u002F395562"},{id:140713,name:"Git python core",href:"\u002Finformatika\u002Fgit-python-core",jpg:"jpg\u002F140713"},{id:543443,name:"Прикладная среда табличного процессора EXCEL",href:"\u002Finformatika\u002Fprikladnaya-sreda-tablichnogo-protsessora-excel",jpg:"jpg\u002F543443"},{id:254646,name:"Резервное копирование и восстановление данных",href:"\u002Finformatika\u002Frezervnoe-kopirovanie-i-vosstanovlenie-dannyh",jpg:"jpg\u002F254646"},{id:364985,name:"Устройства компьютера",href:"\u002Finformatika\u002Fustroystva-kompyutera-3",jpg:"jpg\u002F364985"},{id:298027,name:"Выбор расположения клиентской точки Wi Fi для лучшего покрытия сети",href:"\u002Finformatika\u002Fvybor-raspolozheniya-klientskoy-tochki-wi-fi",jpg:"jpg\u002F298027"},{id:104209,name:"Вычислительная система. Программное обеспечение. Архитектурные особенности модели микропроцессорной системы. (Тема 1.2.4)",href:"\u002Finformatika\u002Fvychislitelnaya-sistema-programmnoe-obespechenie-arhitekturnye-osobennosti",jpg:"jpg\u002F104209"},{id:90361,name:"Створення реляційної бази даних. Лекція № 6",href:"\u002Finformatika\u002Fstvorennya-relyatsyno-bazi-danih-lektsya-n",jpg:"jpg\u002F90361"},{id:246726,name:"What’s the Internet",href:"\u002Finformatika\u002Fwhats-the-internet",jpg:"jpg\u002F246726"},{id:224832,name:"Безопасность web-приложений",href:"\u002Finformatika\u002Fbezopasnost-web-prilozheniy",jpg:"jpg\u002F224832"},{id:262378,name:"Интерфейс ОС (1)",href:"\u002Finformatika\u002Finterfeys-os-1",jpg:"jpg\u002F262378"},{id:607063,name:"Дополнительные типы данных в Python. Множества, кортежи, словари",href:"\u002Finformatika\u002Fdopolnitelnye-tipy-dannyh-v-python-mnozhestva",jpg:"jpg\u002F607063"},{id:151102,name:"Системы автоматизированного проектирования и производства",href:"\u002Finformatika\u002Fsistemy-avtomatizirovannogo-proektirovaniya-i-proizvodstva",jpg:"jpg\u002F151102"},{id:371950,name:"Типы алгоритмов",href:"\u002Finformatika\u002Ftipy-algoritmov-12",jpg:"jpg\u002F371950"},{id:294086,name:"Информационно-коммуникационные технологии в образовательной деятельности",href:"\u002Finformatika\u002Finformatsionno-kommunikatsionnye-tehnologii-v-obrazovatelnoy-deyatelnosti",jpg:"jpg\u002F294086"},{id:347699,name:"Load Balancing and Termination Detection",href:"\u002Finformatika\u002Fload-balancing-and-termination-detection",jpg:"jpg\u002F347699"},{id:438528,name:"Дыбыстық ақпаратты өңдеу. Дыбыс жазу",href:"\u002Finformatika\u002Fdybysty-aparatty-deu-dybys-zhazu-1",jpg:"jpg\u002F438528"},{id:336231,name:"Алгоритмы и структуры данных",href:"\u002Finformatika\u002Falgoritmy-i-struktury-dannyh-67",jpg:"jpg\u002F336231"},{id:295209,name:"Управление компьютером",href:"\u002Finformatika\u002Fupravlenie-kompyuterom-2",jpg:"jpg\u002F295209"}],navigation:{next:"\u002Fekologiya\u002Fdniezhzlk-orshaan-ortany-orau",next_name:"Дүниежүзілік қоршаған ортаны қорғау",prev:"\u002Fyurisprudentsiya\u002Fkriminologiya-ponyatie-predmet-metod-tseli-zadachi",prev_name:"Криминология: понятие, предмет, метод, цели, задачи, функции, система, методология"}}},categories:{result:[{id:H,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:H,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:G,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:11,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:h,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:I,SITE_HOST:"mypreza.com",SITE_LANG:J,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:I,short_name:a,description:a,lang:J,start_url:"\u002F?standalone=true",display:"standalone",background_color:j,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:d,sizes:K,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:d,sizes:K,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:d,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:d,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:d,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:d,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:d,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:d,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:d,sizes:Q,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:b,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F,token:a}}}}("",0,false,"image\u002Fpng",true,"any","maskable",13,"#d53032","#ffffff","HTML5. Chapter 3: HTML for Content Structure","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","h3a","text","none","h3","category","both",80,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Информатика",1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))