САМЫЙ ЛУЧШИЙ ФОРУМ ДЛЯ ОБЩЕНИЯ ВСЕХ И КАЖДОГО

Объявление

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Азы программирования HTML : часть 1

Сообщений 1 страница 20 из 20

1

ВНИМАНИЕ! ЧТОБЫ ИЗБЕЖАТЬ ГНЕВНЫХ КОММЕНТАРИЕВ, КОМУ ЭТО НЕ ИНТЕРЕСНО ПРОСЬБА НАЖАТЬ КРЕСТИК. СПАСИБО.
Кому интересно читайте.
Многие задавались вопросом вот мы сидим, общаемся, а как все делается нам пофиг.
Эти азовы может понять даже 1 классник.
Ну чтоже тем кому не знакомо все сайты делаются на языке HTML тоесть на нём делается основа. CSS уже посложнее(Каскадная таблица стилей) если наш админ Дима её осилит то он сможет написать свой стиль форума(если захочет) JS(JavaScript) на нём делаются разные скрипты, спойлеры, кнопки) если бы не JavaScript то у нас не было и спойлера(вверх вниз) наше радио и т.д
Я объясню только HTML
Ну чтоже. Сначала откройте блокнот(самый обычный)
ВНИМАНИЕ!!!! НЕ ПОЛЬЗОВАТЬСЯ ВОРДОМММММММ!!!!!!! Только Блокнотом или Notepad ++
Напишите основу нашего сайта:(только не копируйте вы ничему не научитесь)

Код:
<html>
<head>
</head>
<body>
</body>
</html>

Сохранили? Вы создали основу сайта(очень важную)
Теперь можно нашу страницу открыть в браузере. Так и поступим.

Что-нибудь видите? Я уверен, что нет. И это неудивительно, ведь это самая элементарная страница. Вы можете посмотреть исходник страницы. Для этого в меню "Вид" выберите пункт меню "Просмотр HTML кода", "Исходный код страницы" или что-то в этом духе, в зависимости от Вашего браузера. Также можно просто нажать CTRL-U (в большинстве браузеров откроется исходный код страницы), и Вы увидите Ваш код.
Или можно нажать по файлу ПКМ и нажать открыть с помощью и выбираете браузер

А теперь давайте обсудим, что мы здесь написали.
<html> <head> <body>- это открывающие теги.
</head> </body> </html>- это закрывающие теги.
Теги бывают парные и одиночные. Парные теги - это теги, которые нуждаются в закрывающем, то есть все три тега, которые мы использовали являются парными, так как они открываются и потом закрываются.

Одиночные теги - это теги, которые не требуют наличие закрывающего тега.
Теперь давайте по полочкам что означают наши основные теги:
Тег <html> это наш главный тег это начало HTML-документа
Тег <head> означает начало заголовка HTML-документа. Сюда могут входить, например, заголовок страницы, различные мета-теги. Обо всём об этом погорим чуть ниже.
Тег </head> означает конец заголовка HTML-документа.
Тег <body> означает начало самого документа. То есть всё (текст, картинки, ссылки и т. д.), что Вы видите на страницах в Интернете - всё расположено в теге <body>.
Тег </body> означает конец содержимого документа.
Тег </html> означает конец HTML-страницы.
А теперь давайте добавим вот что в строчку <head>

Код:
<title>Наша страничка</title>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251">

<meta http-equiv="Content-type" content="text/html; charset=windows-1251">
Тег <title> определяет заголовок страницы, который будет отображён в заголовке окна браузера.

Тег </title> сообщает, что здесь заголовок заканчивается.

Что касается тега <meta>, то здесь сначала я должен сообщить об атрибутах тегов. У тегов могут быть различные атрибуты, определяющие, например, вид их содержимого. Атрибуты ставятся внутри открывающего тега и имеют следующий вид:

Название = "значение".

Тег <meta> у нас определяет тип содержимого документа. Атрибут http-equiv и его значение Content-type определяет, что сейчас будет описан тип документа. Атрибут content и его значение text/html; charset = windows-1251 сообщают браузеру, что данный документ является HTML-документом (text/html), и кодировка этого документа кириллица (windows-1251). Это был пример мета-тегов. Я думаю, что пока с ними хватит.

Теперь займёмся содержимым документа. Надеюсь, что Вы уже поняли, что раз содержимое страницы - значит, будем писать что-то внутри тега <body>. Давайте напишем следующий код внутри тега <body>:

Код:
 <h1> Заголовок 1-го уровня </h1>
<h2> Заголовок 2-го уровня </h2>
<h3> Заголовок 3-го уровня </h3>
<h4> Заголовок 4-го уровня </h4>
<h5> Заголовок 5-го уровня </h5>
<h6> Заголовок 6-го уровня </h6>

Теги <h1>, <h2>, <h3>, <h4>, <h5>, <h6> - выводят текст в браузере. Причём этот текст является заголовком, более того, чем больше цифра (от 1-го до 6-ти), тем менее крупным шрифтом будет выведен соответствующий текст. Таким образом, код Вашей страницы имеет вид:

Код:
 <html>
<head>
<title> Наша страничка </title>
 <meta http-equiv="Content-type" content="text/html; charset=windows-1251">
</head>
<body>
  <h1>Заголовок 1-го уровня</h1>
  <h2>Заголовок 2-го уровня</h2>
  <h3>Заголовок 3-го уровня</h3>
  <h4>Заголовок 4-го уровня</h4>
  <h5>Заголовок 5-го уровня</h5>
  <h6>Заголовок 6-го уровня</h6>
</body>
</html>

Сохраните страницу и посмотрите на неё в браузере.

Также можно добавить немного атрибутов и в тег <body>. Давайте добавим атрибут text со значением green (зелёный). И атрибут bgcolor со значением yellow (жёлтый).

Таким образом, тег <body> выглядит так:

Код:
 <body text = "green" bgcolor = "yellow">
  <h1>Заголовок 1-го уровня</h1>
  <h2>Заголовок 2-го уровня</h2>
  <h3>Заголовок 3-го уровня</h3>
  <h4>Заголовок 4-го уровня</h4>
  <h5>Заголовок 5-го уровня</h5>
  <h6>Заголовок 6-го уровня</h6>
</body>
</html>

Я думаю для тех кто с головой дружит поймут наилегчайшее!
Вопросы сюда! Или сюда: vk.com/matveyspec
пока! Увидемся в следующей статье!

+1

2

Матвей вау.   o.O Да ты будущий хакер поди  :crazyfun:  http://arcanumclub.ru/smiles/smile454.gif  http://arcanumclub.ru/smiles/smile9.gif

Подпись автора

https://smailiki.ucoz.net/_ph/70/2/114585549.png?1652276202
https://smailiki.ucoz.net/_ph/53/2/545773567.gifhttps://smail1.ucoz.net/_ph/7/2/454533062.gif
По всем вопросам, касаемо работы форума, пишите в тему без регистрации или в чат

0

3

Dimyan написал(а):

Матвей вау.    Да ты будущий хакер поди

Хакер в хорошем смысле или в плохом? Ты че нибудь понял?

0

4

Агент Поддержки №1 написал(а):

<meta http-equiv="Content-type" content="text/html; charset=windows-1251">

Лучше так

Код:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Агент Поддержки №1 написал(а):

Notepad ++

При кодировании: UTF-8 без BOM.

0

5

Soroka написал(а):

Лучше так

О разбираешься значит. Но можно и так и так. Все равно работать будет главное все правильно переписать(не скопировать)

0

6

Soroka написал(а):

Лучше так

При кодировании: UTF-8 без BOM.

Но как бы "windows-1251" даёт команду браузеру что кодировка документа кириллица а там выдаст непонятно что. Я просто на планшета счас

0

7

Агент Поддержки №1 написал(а):

Все равно работать будет

Нет не "все равно работать будет".
Одинаково работать будет на твоем компе.  Но кодируя сайт, ты пишешь не для себя, а для других.
Но ты не знаешь, какая систему стоит на клиентском устройстве, какой браузер и какой набор языков поддерживается.

Твой вариант выдаст только 256 символов только на гаджетах с установленным русским языком под виндой.
На всех остальных компах текст не отобразится или исказится.
Так кодировали давно в рунете.

Тебе предложила современный международный вариант.   
Он позволяет отображать порядка 100000 символов.
Символы отобразятся также как у тебя на всех компах и гаджетах в мире,
вне зависимости от наличия русского языка в системе на всех популярных системах.

Отредактировано Soroka (2015-07-07 21:21:26)

0

8

Агент Поддержки №1 написал(а):

Хакер в хорошем смысле или в плохом? Ты че нибудь понял?

Надеюсь что в хорошем.  http://arcanumclub.ru/smiles/smile10.gif Я имею ввиду что тебе бы на программиста, вырастишь, выучится. А это в наше время БОГ и Дьявол, в одном  http://liubavyshka.ru/_ph/82/2/631236389.gif

Подпись автора

https://smailiki.ucoz.net/_ph/70/2/114585549.png?1652276202
https://smailiki.ucoz.net/_ph/53/2/545773567.gifhttps://smail1.ucoz.net/_ph/7/2/454533062.gif
По всем вопросам, касаемо работы форума, пишите в тему без регистрации или в чат

0

9

Dimyan написал(а):

Надеюсь что в хорошем.   Я имею ввиду что тебе бы на программиста, вырастишь, выучится. А это в наше время БОГ и Дьявол, в одном

Ты что нибудь понгял создал своё?

0

10

Агент Поддержки №1 написал(а):

Ты что нибудь понгял создал своё?

В блокнотах? Да, делал. Меня как то Алексей учил. Он системный администратор.

<DIV id="waterMark" style="position:absolute;top:6;left:6">
<p align=center><table bgcolor=red border=0 cellpadding=0 cellspacing=0 width=750>
                    <tr>
                        <td><font size=7 color=black face="Arial,Tahoma,Helvetica"><b>Английский язык</b></font></a></td>
                    </tr>
</table>
</DIV>

<DIV id="waterMark" style="position:absolute;top:4;left:4">
<p align=center><table border=0 cellpadding=0 cellspacing=0 width=750>
                    <tr>
                        <td><font size=7 color=yellow face="Arial,Tahoma,Helvetica"><b>Английский язык</b></font></a></td>
                    </tr>
</table>
</DIV>
<DIV id="waterMark" style="position:absolute;top:5;left:5">
<p align=center><table border=0 cellpadding=0 cellspacing=0 width=750>
                    <tr>
                        <td><font size=7 color=#ffdb5e face="Arial,Tahoma,Helvetica"><b>Английский язык</b></font></a></td>
                    </tr>
</table>
</DIV>

Подпись автора

https://smailiki.ucoz.net/_ph/70/2/114585549.png?1652276202
https://smailiki.ucoz.net/_ph/53/2/545773567.gifhttps://smail1.ucoz.net/_ph/7/2/454533062.gif
По всем вопросам, касаемо работы форума, пишите в тему без регистрации или в чат

0

11

Dimyan написал(а):

В блокнотах? Да, делал. Меня как то Алексей учил. Он системный администратор.

Так ты таблицы делал?

0

12

Матвей написал(а):

Так ты таблицы делал?

Мы с ним тренировались писать шапку сайта, стиль, иконки, ну и таблицы тоже  http://arcanumclub.ru/smiles/smile10.gif

Нет не так, тренировался я, а он меня учил. Эх, мне бы побольше с ним общаться, но никак не выходит. Он постоянно занят ((
Кстати, Сорока в этом тоже шарит, но она вряд ли помогать будет  :sceptic:

Подпись автора

https://smailiki.ucoz.net/_ph/70/2/114585549.png?1652276202
https://smailiki.ucoz.net/_ph/53/2/545773567.gifhttps://smail1.ucoz.net/_ph/7/2/454533062.gif
По всем вопросам, касаемо работы форума, пишите в тему без регистрации или в чат

0

13

Dimyan написал(а):

Мы с ним тренировались писать шапку сайта, стиль, иконки, ну и таблицы тоже 

Нет не так, тренировался я, а он меня учил. Эх, мне бы побольше с ним общаться, но никак не выходит. Он постоянно занят ((
Кстати, Сорока в этом тоже шарит, но она вряд ли помогать будет

У моего бати тоже знакомый программист незнаю может тоже будет занят потомучто работает на моего папу

0

14

Матвей написал(а):

У моего бати тоже знакомый программист не знаю может тоже будет занят потому что работает на моего папу

О, так у тебя же отец рекламой занимается да ведь?  Слушай, так ты попросись к нему на работу, найди того программиста. Уверен он оценит твое стремление. Может твой отец с ним договорится? А еще сам воочию посмотришь как создается реклама http://s009.radikal.ru/i308/1505/50/58ddcbf3b1d3.jpg

Подпись автора

https://smailiki.ucoz.net/_ph/70/2/114585549.png?1652276202
https://smailiki.ucoz.net/_ph/53/2/545773567.gifhttps://smail1.ucoz.net/_ph/7/2/454533062.gif
По всем вопросам, касаемо работы форума, пишите в тему без регистрации или в чат

0

15

Dimyan написал(а):

Сорока в этом тоже шарит, но она вряд ли помогать будет

Будет время - подскажу.  Забыл чтоли, какой подарок вначале предлагала по профессиональному запуску сайта?

Но если будем тратить очень много букв на борьбу за права сорок, то времени на хорошие дела не останется.

Dimyan написал(а):

в наше время БОГ и Дьявол, в одном

В принципе верно, но сегодня все настолько усложнилось, что на практике это разные факультеты в универах и сильно разная специализация.

0

16

Soroka написал(а):

Будет время - подскажу.  Забыл чтоли, какой подарок вначале предлагала по профессиональному запуску сайта?

Но если будем тратить очень много букв на борьбу за права сорок, то времени на хорошие дела не останется.

В принципе верно, но сегодня все настолько усложнилось, что на практике это разные факультеты в универах и сильно разная специализация.

Я помню смотрел фильм про компанию "Фэйсбук" там у них в офисе написан "Hack"
А ониответил -Хак это что-то сделать хороше и говорят "Ну ты вообщетхакер"

0

17

Матвей написал(а):

CSS уже посложнее

А что в CSS сложного?  o.O

0

18

Deneris написал(а):

Матвей написал(а):

    CSS уже посложнее

А что в CSS сложного?  o.O

Да.. Тогда было сложно, а сейчас легко.

0

19

Ну, результат то в сети есть? есть на что посмотреть?

+1

20

киборг , Ксать тож интересно ... :glasses: (Мну сам яваскриптёр -самоучка... второй админ на mybb

0