🗊Презентация HTML

Категория: Образование
Нажмите для полного просмотра!
HTML, слайд №1HTML, слайд №2HTML, слайд №3HTML, слайд №4HTML, слайд №5HTML, слайд №6HTML, слайд №7HTML, слайд №8HTML, слайд №9HTML, слайд №10HTML, слайд №11HTML, слайд №12HTML, слайд №13HTML, слайд №14HTML, слайд №15HTML, слайд №16HTML, слайд №17HTML, слайд №18HTML, слайд №19HTML, слайд №20HTML, слайд №21
Скачать
Вы можете ознакомиться и скачать презентацию на тему HTML. Доклад-сообщение содержит 21 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


Computation and Problem Solving HTML Korzhumbayev Azamat
Описание слайда:
Computation and Problem Solving HTML Korzhumbayev Azamat

Слайд 2


Block-Level vs. Inline Elements This works <h2><em>Bold and italic</em></h2> How about this <em><h2>Bold and italic</h2></em> Block-level element/tag define a complete section or block of text Can contain inline element and block-level element Inline elements Define the structure of a sequence of characters within a line may not contain a block-level element may be used within a block
Описание слайда:
Block-Level vs. Inline Elements This works <h2><em>Bold and italic</em></h2> How about this <em><h2>Bold and italic</h2></em> Block-level element/tag define a complete section or block of text Can contain inline element and block-level element Inline elements Define the structure of a sequence of characters within a line may not contain a block-level element may be used within a block

Слайд 3


Block-Level vs. Inline Elements Partial list of block-level tags p, blockquote, h1 … h6, div, ul, ol, li, table, tr, td, th Partial list of inline tags a (anchor tag), em, strong, img, q (short quotation), span Example <p> This is a <span style=“color:red;”> simple </span> paragraph.</p>
Описание слайда:
Block-Level vs. Inline Elements Partial list of block-level tags p, blockquote, h1 … h6, div, ul, ol, li, table, tr, td, th Partial list of inline tags a (anchor tag), em, strong, img, q (short quotation), span Example <p> This is a <span style=“color:red;”> simple </span> paragraph.</p>

Слайд 4


Attribute An attribute is a special code that can enhance or modify a tag. They are generally located in the starting tag after the tag name. Basic syntax for xhtml tags and attributes <tag attribute="value">   </tag> All tags must be lower case all values of attributes need to be surrounded by quotes
Описание слайда:
Attribute An attribute is a special code that can enhance or modify a tag. They are generally located in the starting tag after the tag name. Basic syntax for xhtml tags and attributes <tag attribute="value">   </tag> All tags must be lower case all values of attributes need to be surrounded by quotes

Слайд 5


Common Attributes id unique identifier for elements class the class of the element, used to specify similar attributes for dissimilar elements by putting them in the same class style an inline style definition title a text to display in a tool tip
Описание слайда:
Common Attributes id unique identifier for elements class the class of the element, used to specify similar attributes for dissimilar elements by putting them in the same class style an inline style definition title a text to display in a tool tip

Слайд 6


Common Attributes Examples 1 <p id=“firstParag” class=“indent” title=“This paragraph introduces html attributes”> Assuming style sheet contains .indent { margin-right: 5%; margin-left: 5%;} Example 2 <p id=“firstParag” style=“margin-right: 5%; margin-left: 5%;” title=“This paragraph introduces html attributes”>
Описание слайда:
Common Attributes Examples 1 <p id=“firstParag” class=“indent” title=“This paragraph introduces html attributes”> Assuming style sheet contains .indent { margin-right: 5%; margin-left: 5%;} Example 2 <p id=“firstParag” style=“margin-right: 5%; margin-left: 5%;” title=“This paragraph introduces html attributes”>

Слайд 7


Common Attributes lang sets the language code; “en”: English, “fr”: French, “es”: Spanish, “de”: German etc. dir sets the text direction, left to right or right to left <p lang=“fr” dir=“ltr”>bonjour!</p> accesskey assigns an access key to an element. An access key is a single character from the document character set. tabindex Sets the tab order of an element
Описание слайда:
Common Attributes lang sets the language code; “en”: English, “fr”: French, “es”: Spanish, “de”: German etc. dir sets the text direction, left to right or right to left <p lang=“fr” dir=“ltr”>bonjour!</p> accesskey assigns an access key to an element. An access key is a single character from the document character set. tabindex Sets the tab order of an element

Слайд 8


Deprecated Attributes In order to separate structure from presentation many HTML attributes/tags used for presentation were deprecated, starting from HTML version 4 Some deprecated attributes font, <font size=“5” color=“red”>Text</font> align, <p align=“center”>Centered text</p> bgcolor, width, height, etc.
Описание слайда:
Deprecated Attributes In order to separate structure from presentation many HTML attributes/tags used for presentation were deprecated, starting from HTML version 4 Some deprecated attributes font, <font size=“5” color=“red”>Text</font> align, <p align=“center”>Centered text</p> bgcolor, width, height, etc.

Слайд 9


Lists Ordered lists & Unordered lists <ol> for ordered <ul> for unordered <li> for each item inside the list Browser inserts a blank line before & after the list (block-level element) Example <ol> <li>Item 1</li> <li>Item 2</li> <li>Item3</li> </ol>
Описание слайда:
Lists Ordered lists & Unordered lists <ol> for ordered <ul> for unordered <li> for each item inside the list Browser inserts a blank line before & after the list (block-level element) Example <ol> <li>Item 1</li> <li>Item 2</li> <li>Item3</li> </ol>

Слайд 10


Lists Nested lists <ul> <li>Top Level, Item 1</li> <li>Top Level, Item 2 <ul> <li>Sublevel 1, Item 1 <ul> <li>Sublevel 2, Item 1</li> <li>Sublevel 2, Item 2</li> </ul> </li> <li>Sublevel 1, Item 2</li> </ul> </li> <li>Top Level, Item 3</li> </ul>
Описание слайда:
Lists Nested lists <ul> <li>Top Level, Item 1</li> <li>Top Level, Item 2 <ul> <li>Sublevel 1, Item 1 <ul> <li>Sublevel 2, Item 1</li> <li>Sublevel 2, Item 2</li> </ul> </li> <li>Sublevel 1, Item 2</li> </ul> </li> <li>Top Level, Item 3</li> </ul>

Слайд 11


Customizing List Display List numbers or marks can be customized “type” attribute Example <ul type=“square”> <ol type=“A”> <ol type=“a”> <ol type=“I”> <ol type=“i”>
Описание слайда:
Customizing List Display List numbers or marks can be customized “type” attribute Example <ul type=“square”> <ol type=“A”> <ol type=“a”> <ol type=“I”> <ol type=“i”>

Слайд 12


Definition Lists <dl> for list element; <dt> for “definition terms”; <dd> for “definition data” Example <dl> <dt><strong>CPU</strong></dt> <dd>Central Processing Unit</dd> <dt><strong>ALU</strong></dt> <dd>Arithmetic Logic Unit</dd> <dt><strong>GHz</strong></dt> <dd>Gigahertz</dd> </dl>
Описание слайда:
Definition Lists <dl> for list element; <dt> for “definition terms”; <dd> for “definition data” Example <dl> <dt><strong>CPU</strong></dt> <dd>Central Processing Unit</dd> <dt><strong>ALU</strong></dt> <dd>Arithmetic Logic Unit</dd> <dt><strong>GHz</strong></dt> <dd>Gigahertz</dd> </dl>

Слайд 13


Tables <table> Tables used not only for displaying data in tabular format A table (<table>) in HTML Consists of rows (<tr>) Each row consists of rectangular boxes called cells (<td>) <table> <tr><td>R1,Cell1</td><td>R1,Cell2</td></tr> <tr><td>R2,Cell1</td><td>R2,Cell2</td></tr> </table>
Описание слайда:
Tables <table> Tables used not only for displaying data in tabular format A table (<table>) in HTML Consists of rows (<tr>) Each row consists of rectangular boxes called cells (<td>) <table> <tr><td>R1,Cell1</td><td>R1,Cell2</td></tr> <tr><td>R2,Cell1</td><td>R2,Cell2</td></tr> </table>

Слайд 14


Tables By default Text in each cell is automatically aligned to the left All the cells in a column have the same width Width of the column is determined by the cell with the most text in it <th> for “table header” <tr> <th>Header1</th> <th>Header2</th> </tr>
Описание слайда:
Tables By default Text in each cell is automatically aligned to the left All the cells in a column have the same width Width of the column is determined by the cell with the most text in it <th> for “table header” <tr> <th>Header1</th> <th>Header2</th> </tr>

Слайд 15


Tables Other attributes of <table> align, cellpadding, cellspacing, colspan Yet XHTML 1.0 Strict don’t allow this attributes, so use stylesheet instead Example <caption> <colgroup> <thead>, <tfoot>, <tbody>
Описание слайда:
Tables Other attributes of <table> align, cellpadding, cellspacing, colspan Yet XHTML 1.0 Strict don’t allow this attributes, so use stylesheet instead Example <caption> <colgroup> <thead>, <tfoot>, <tbody>

Слайд 16


Iframe Used to display a web page within a web page. height, width, src, style, name Example <iframe style="border:none" height="300px" width="100%" src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
Описание слайда:
Iframe Used to display a web page within a web page. height, width, src, style, name Example <iframe style="border:none" height="300px" width="100%" src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

Слайд 17


Links The true power of WWW comes with hyperlinks Surfer click on a specially marked word or image on a web page and automatically be jumped to another web page or another place in the same web page. Another web page – External link Another place – Internal link Use <a> (anchor) tag to create a link
Описание слайда:
Links The true power of WWW comes with hyperlinks Surfer click on a specially marked word or image on a web page and automatically be jumped to another web page or another place in the same web page. Another web page – External link Another place – Internal link Use <a> (anchor) tag to create a link

Слайд 18


Links External Links <a href=“SomeURL”>Text/image</a> Create a link to CS web page <a href=“http://www.csse.iitu.kz/”>CET Department at IITU</a> Be careful about the quotation mark Internal Links Create a place/anchor <a id=“SomeLabel”></a> or <a id=“SomeLabel” name=“SomeLabel”/></a> Link to the anchor <a href=“#SomeLabel”>Go to some place</a>
Описание слайда:
Links External Links <a href=“SomeURL”>Text/image</a> Create a link to CS web page <a href=“http://www.csse.iitu.kz/”>CET Department at IITU</a> Be careful about the quotation mark Internal Links Create a place/anchor <a id=“SomeLabel”></a> or <a id=“SomeLabel” name=“SomeLabel”/></a> Link to the anchor <a href=“#SomeLabel”>Go to some place</a>

Слайд 19


Links Combining External and Internal Links <a href=“SomeURL#SomeLabel>Link Text</a>
Описание слайда:
Links Combining External and Internal Links <a href=“SomeURL#SomeLabel>Link Text</a>

Слайд 20


Images <img> Insert an image using <img> tag <img src=“URL of the image file” /> Image can an image on a remote machine on the Internet, or an image in your local machine. Examples, <img src="http://www.csse.iitu.kz/gallery/nature/images/Desert_and_Blue_Sky.jpg"/> <img src="../images/Lake_Karakul.jpg" />
Описание слайда:
Images <img> Insert an image using <img> tag <img src=“URL of the image file” /> Image can an image on a remote machine on the Internet, or an image in your local machine. Examples, <img src="http://www.csse.iitu.kz/gallery/nature/images/Desert_and_Blue_Sky.jpg"/> <img src="../images/Lake_Karakul.jpg" />

Слайд 21


Images Alternative Text for images <img src=“Image URL” alt=“Alternative Text” /> Example <img src="../images/Lake_Karakul.jpg" alt="Lake Karakul"/> width & height attributes <img src="../images/Lake_Karakul.jpg" alt="Lake Karakul" width="257" height="161" />
Описание слайда:
Images Alternative Text for images <img src=“Image URL” alt=“Alternative Text” /> Example <img src="../images/Lake_Karakul.jpg" alt="Lake Karakul"/> width & height attributes <img src="../images/Lake_Karakul.jpg" alt="Lake Karakul" width="257" height="161" />

Скачать

Теги HTML
Похожие презентации
Mypresentation.ru
Загрузить презентацию