Презентация по информатике на тему _Создание таблиц на HTML _..ppt

ssuser2621cb 5 views 17 slides Sep 17, 2025
Slide 1
Slide 1 of 17
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17

About This Presentation

итмитмитмит


Slide Content

Основы языка HTML
(создание таблиц)

Таблицы
Таблица в HTML создаётся тегами
< TABLE>и< /TABLE>,
строки таблицы (помещаются между тегами
< TABLE> и < /TABLE>) тегами< TR>и< /TR>,
а столбцы таблицы (помещаются между
тегами
< TR> и < /TR>) тегами< TD>и< /TD>.
<TH> и </TH> создание одной ячейки

Таблицы
 
 
Например, создадим таблицу, состоящую из одной
строки и двух столбцов. HTML-код будет
выглядеть так:
< table>— начало таблицы
 
 
< tr>— начало строки
 
   
< td>Первая ячейка< /td>— первый столбец
 
   
< td>Вторая ячейка< /td>— второй столбец
 
 
< /tr>— конец строки
< /table>— конец таблицы

Примечание. Помни, браузер выводит
HTML-код, как текст, ставим после
угловой скобки «<» пробел.
Этот же код можно записать и так:
< table>< tr>< td> Первая ячейка< /td>
< td> Вторая ячейка< /td>< /tr>< /table>

Рамка таблицы (границы)
 
  
По-умолчанию, таблица в браузерах
представляется без рамки.
Чтобы рамка таблицы была видна, используется
атрибут «border»:
< table border="1">
 
 < tr>
 
   < td>Первая ячейка< /td>
 
   < td>Вторая ячейка< /td>
 
 < /tr>
< /table>
 
 

Рамка таблицы (границы)
 И тогда браузер покажет:
Первая ячейка Вторая ячейка 
  
Первая ячейка Вторая ячейка

 
 
Значение атрибута «border» влияет только на
внешнюю рамку, границы между ячейками
изменять нельзя. Например, если изменить
значение атрибута «border» с «1» на «5»:
< table border="5">
 
 < tr>
 
   < td>Первая ячейка< /td>
 
   < td>Вторая ячейка< /td>
 
 < /tr>
< /table>

Тогда в браузере мы увидим:
Первая ячейка Вторая ячейка

Объединение ячеек таблицы
•Чтобы объединить ячейки таблицы по
горизонтали (столбцам) или по вертикали
(строкам), в HTML применяются
следующие атрибуты:
•colspan— объединение ячеек по
горизонтали (столбцам);
•rowspan— объединение ячеек по вертикали
(строкам).

Тогда в браузере мы увидим:
: Первая и вторая ячейки Третья ячейка
Четвертая
ячейка
Пятая ячейка Шестая ячейка

Форматирование текста
Изменить начертание шрифта
позволяют следующие тэги:
<B> …</B> Жирный
<I> … </I> Курсив
<U>…</U> Подчеркнутый
<B> <I> <U> …</U></I></B> Жирный подчеркнутый курсив
<TT> …</TT> Равноширинный
<EM> …</EM> Выделение

Тэги физической разметки HTML
12
Курсив (italic):
<i>Вася</i> Вася
Жирный (bold):
<b>Вася</b> Вася
Подчёркивание (underline):
<u>Вася</u> Вася
Зачёркивание (strikeout):
<s>Вася</s>
Верхний индекс (superscript):
Вася<sup>2</sup> Вася
2
Нижний индекс (subscript):
Вася<sub>2</sub> Вася
2

Создание Web – страницы «Таблица погоды».
 
 
<html>
<head>
<title>Tabliza</title>
</head>
<body >
<center> <h1> <b> Таблица погоды
</b></h1></center>
<HR>
<table align=center border=l >
<tr> <th>День недели</th>
<th>Погода</th></tr>
<tr><td>понедельник</td>
<td>солнечная</td></tr>
<tr><td>вторник</td>
<td>солнечная</td></tr>
<tr><td>среда</td>
<td>дожливая</td></tr>
</table>
</body >
</html>

Создание Web – страницы «Таблица погоды».
День недели Погода
Понедельник Солнечная
Вторник Солнечная
среда дождливая

Гиперссылка
Гипертекст (англ. hypertext) – это текст,
содержащий гиперссылки.
Гиперссылка (англ. hyper reference) – это
«активная» ссылка на другой объект (часть того
же документа, другой документ, файл, каталог,
программу и т.д.).

Гиперссылки (локальные -внутренние)
16
Переход на
<a href="newpage.html">новую страницу</a>.
(тэг)
(гиперссылка)
страница в том же каталоге:
во вложенном каталоге:
<a href="news/info.htm">Информация</a>.
в родительском каталоге:
<a href="../info.htm">Информация</a>.
в соседнем каталоге:
<a href="../news/info.htm">Информация</a>.

Гиперссылки (внешние)
17
<a href="http://example.net/news/info.htm ">
Информация</a>.
на URL:
на главную страницу сайта:
<a href="http://example.net">Информация</a>.
для скачивания архива:
<a href="http://example.net/game.zip">
Скачать</a>.
для запуска почтовой программы:
<a href="mailto:[email protected]">
Напишите мне!</a>
Tags