3Computer Science_10_Revision_Web-development

  • pptx
  • 09.05.2020
Публикация на сайте для учителей

Публикация педагогических разработок

Бесплатное участие. Свидетельство автора сразу.
Мгновенные 10 документов в портфолио.

Иконка файла материала 3Computer Science_10_Revision_Web-development.pptx

Learners are able to:
use HTML tags for web page developing
use CSS when designing web pages;
use ready-made scripts when developing web pages;
use HTML tags to insert multimedia objects on a web page.

HTML (HyperText Markup Language) is a standardized markup language for documents on the World Wide Web. Most web pages contain an HTML markup (or XHTML) br

HTML tables 

You can change the color of the table frame using the "bordercolor" attribute. For example:

< table border="5" bordercolor="#FF0000">   < tr>     < td>Первая ячейка< /td>     < td>Вторая ячейка< /td>   < /tr> < /table>

Indents in the table

To change indents between adjacent cells in a table, the HTML attribute "cellspacing" is used in HTML. Let's make the table more complicated: we make two rows of three columns and apply the attribute "cellspacing":

 < table border="1" cellspacing="10">   < tr>     < td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td>Третья ячейка< /td>   < /tr>   < tr>     < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td>   < /tr> < /table>

In order to specify indentation within cells, the "cellpadding" attribute is used. If we change the first line in our HTML code:

< table border="1" cellpadding="10">   < tr>     < td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td>Третья ячейка< /td>   < /tr>   < tr>     < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td>   < /tr> < /table>

Combining table cells

To merge table cells horizontally (columns) or vertically (rows), HTML uses the following attributes:
colspan - combining cells horizontally (columns);
rowspan - combining cells vertically (rows).
For example, change our HTML code like this:

< table border="1" cellpadding="10">   < tr>     < td colspan="2">Первая и вторая ячейки< /td>< td>Третья ячейка< /td>   < /tr>   < tr>     < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td>   < /tr> < /table>

< table border="1" cellpadding="10">   < tr>     < td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td rowspan="2">Третья и шестая ячейки< /td>   < /tr>   < tr>     < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>   < /tr> < /table>

Table title

If you use a table to organize the data (and not for page layout), you might need to use a header. The title of the table is specified by the tag. For example:

< table border="1" cellpadding="10"> < caption>Заголовок таблицы< /caption>   < tr>     < td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td>Третья ячейка< /td>   < /tr>   < tr>     < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td>   < /tr> < /table>

Table sizes

You can change the dimensions of a table and cells using the following attributes:
width - width of the table, column, cell;
height - the height of the table, rows, cells.
Their values ​​are specified in pixels or percentages. For example,

< table border="1" cellpadding="10" height="50px">   < tr>     < td>Первая ячейка< /td>< td width="75%">Вторая ячейка< /td>< td>Третья ячейка< /td>   < /tr>   < tr>     < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td>   < /tr> < /table>

Table background

In HTML, the background color of the table or its individual cells is set using the "bgcolor" attribute. About how to select the color of an element in HTML, we said in the lesson about the attributes of the body tag. Example:

< table border="1" cellpadding="10" bgcolor="#999999">   < tr>     < td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td>Третья ячейка< /td>   < /tr>   < tr>     < td>Четвертая ячейка< /td>< td bgcolor="#FF0000">Пятая ячейка< /td>< td>Шестая ячейка< /td>   < /tr> < /table>

You can use pictures as the background of a table or a single cell. In HTML, this is done using the "background" attribute.
 

< table border="1" cellpadding="10">   < tr>     < td>Первая ячейка< /td>< td background="fon.jpg">Вторая ячейка< /td>   < /tr>   < tr>     < td>Третья ячейка< /td>< td>Четвёртая ячейка< /td>   < /tr> < /table>

Change the font size of the html-page

Choosing the font color of the html page

HTML-код:

Красный цвет


Синий цвет


 

Отображение в браузере: Красный цвет
 
Синий цвет
 


Changing the background color of an html page

Task
Create 2 pages of the website for the topic you are interested in. Link these pages with links. Add a table, image and lists. Using the list of tags, add new elements to your page. For example, animation, a running line, etc. Using the Internet, find and use tags that will help distinguish your site from the site of classmates.