Программирование HTML

Автор: Юган

?

Я хочу научиться программированию

  1. Да

    100,0%
  2. Нет

    0 голосов
    0,0%
  1. TopicStarter Overlay
    Юган

    Юган Здеся я))

    Регистрация:
    12 апр 2015
    Сообщения:
    0
    Поблагодарили:
    1.897
    Баллы:
    66
    Пол:
    Мужской
    Решил создать эту тему о веб-разработке и программировании в HTML.
    Добро пожаловать, начинающим и заинтересованным, также, в помощь мне, знающих.
    Сразу предупреждаю - я не смогу вести эту ветку ежедневно, но по возможности постараюсь.

    Эта тема подразумевает в себе что-то на подобие уроков (первые азы) в программировании, здесь вы узнаете о том, как создаются сайты, и научитесь создавать свои страницы...



    зы. За флуд в этой ветке - бан без предупреждения!
     
    Последнее редактирование: 14 янв 2016
    Сказали спасибо: Вишенка, Сержант и Alina5577
  2. TopicStarter Overlay
    Юган

    Юган Здеся я))

    Регистрация:
    12 апр 2015
    Сообщения:
    0
    Поблагодарили:
    1.897
    Баллы:
    66
    Пол:
    Мужской
    Итак. Для работы нам нужен будет хороший редактор, что бы не писать в виндовском блокноте, предлагаю закачать Notepad++
    Это тот же блокнот, только продвинутый - вы его полюбите так же как я)), в своё время.

    И вообще - добавлю-ка я опрос на неделю в шапке ветки. Это вообще кому-то нужно?

    зы. Добавил. Неделю смотрю, дальше продолжим))
     
    Последнее редактирование: 11 янв 2016
    Сказали спасибо: Вишенка и Сержант
  3. Alina5577

    Alina5577

    Регистрация:
    30 май 2015
    Сообщения:
    9
    Поблагодарили:
    5.341
    Баллы:
    75
    Пол:
    Женский
    Если будешь как на уроке все объяснять поэтапно, то интересно, а искать где-то литературу честно говоря лень )
     
    Сказали спасибо: Вишенка и lef
  4. TopicStarter Overlay
    Юган

    Юган Здеся я))

    Регистрация:
    12 апр 2015
    Сообщения:
    0
    Поблагодарили:
    1.897
    Баллы:
    66
    Пол:
    Мужской
    Я постараюсь, если вопросы будут. Но!!! Придётся и самим постараться поискать, что-то я подскажу.
    Просто в рамках форума бесполезно чему-либо научиться. Имхо.
     
    Сказал(-а) спасибо: Вишенка
  5. TopicStarter Overlay
    Юган

    Юган Здеся я))

    Регистрация:
    12 апр 2015
    Сообщения:
    0
    Поблагодарили:
    1.897
    Баллы:
    66
    Пол:
    Мужской
    Ну если нотепад скачали, давайте напишем нашу первую страницу.

    Для порядка в компе, создаём отдельную папку..., назовём её: html, в этой папке необходимо создать файл index.html и открыть в нашем блокноте.
    Писать будем банально - Привет, Мир!

    Код:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Моя первая страница</title>
        </head>
    
        <body>
            <h1>Привет, Мир!</h1>
        </body>
    
    </html>
    
    После сохранения, двойным кликом по файлу, откроется в браузере наша страница и будет что-то на подобие этого

    Kazam_screenshot_00014.png
     
    Сказали спасибо: Вишенка и lef
  6. TopicStarter Overlay
    Юган

    Юган Здеся я))

    Регистрация:
    12 апр 2015
    Сообщения:
    0
    Поблагодарили:
    1.897
    Баллы:
    66
    Пол:
    Мужской
    Круто!
    Следующим постом расскажу вкратце что означают все наши многочисленные "закорючки", для вывода такой короткой записи.

    И, да. Не занимайтесь копированием кода - набивать нужно вручную, если, конечно, есть желание чему то научиться.
     
    Сказал(-а) спасибо: Вишенка
  7. TopicStarter Overlay
    Юган

    Юган Здеся я))

    Регистрация:
    12 апр 2015
    Сообщения:
    0
    Поблагодарили:
    1.897
    Баллы:
    66
    Пол:
    Мужской
    Если в браузере открыть наш исходный код ctrl+U или правая кнопка мыши "Просмотр кода страницы", что-то на подобие этого, разные браузеры по разному интерпретируют, то мы увидим то что написали в редакторе.

    Kazam_screenshot_00015.png

    Что мы тут имеем: первая строчка - элемент <!DOCTYPE>
    Код:
    <!DOCTYPE html>
    Этой строчкой мы говорим браузеру как интерпретировать нашу страницу, т.к. существуют разные версии языка написания html-кода.
    В данном примере это HTML5, последняя на сегодняшний день.

    Следующий элемент <html>, который имеет закрывающий тег </html>.
    Собственно HTML - это теговый язык и все теги в документе должны располагаться внутри этого элемента.
    Теги бывают открывающимися <html> и иметь обязательный закрывающийся тег </html> (слэш перед html).
    или
    Код:
    <head>
        ...
    </head>
    
    или
    Код:
    <body>
        ...
    </body>
    
    Есть некоторые элементы, которые не имеют закрывающегося тега, например
    <br /> - начало новой строки.

    Элемент <head>, имеет обязательный закрывающий тег </head>. В этих тегах располагается заголовок страницы и всякие другие мета-теги для поисковых систем, о них мы поговорим позже, в данном примере - тайтл. Указанная информация здесь, на странице браузера не видно, кроме информации в элементе <title> которую можно увидеть наведя мышкой на ярлык вкладки браузера.
    В нашем примере будет - Моя первая страница.

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

    Элемент <h1> - закрывающий тег обязателен!
    Это заголовок. <h1> - это самый главный заголовок.
    Всего их шесть, для наглядности давайте допишем и посмотрим что получится:
    Код:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Моя первая страница</title>
        </head>
    
        <body>
            <h1>Привет, Мир!</h1>
            <h2>Привет, Мир!</h2>
            <h3>Привет, Мир!</h3>
            <h4>Привет, Мир!</h4>
            <h5>Привет, Мир!</h5>
            <h6>Привет, Мир!</h6>
        </body>
    
    </html>
    Kazam_screenshot_00016.png

    Думаю понятно: <h1> это самый крупный шрифт, а <h6> самый мелкий.

    Наверное не нужно объяснять для чего нужны заголовки.
    До недавнего времени считалось, что заголовок <h1> должен быть единственным на странице, по нему поисковые системы определяют... гм... как сказать)) - о чём страница чтоль.
    Ну не важно, и мы будем придерживаться этого правила.

    Задание:
    Создать страницу teach.html и написать заголовком <h3>: - Я учусь программированию!
    А в тайтлах прописать - Тусовка, это круто!

    Жду скриншотов и вопросов, что не понятно.
     
    Сказали спасибо: Вишенка и Valeryn
  8. lef

    lef Новая особа

    Регистрация:
    17 апр 2015
    Сообщения:
    6
    Поблагодарили:
    1.794
    Баллы:
    65
    Пол:
    Мужской
    Хренасе, получилось : )))

    html 1.JPG
     
    Сказали спасибо: Вишенка, Valeryn и Юган
  9. Valeryn

    Valeryn

    Регистрация:
    6 июл 2015
    Сообщения:
    0
    Поблагодарили:
    527
    Баллы:
    36
    Пол:
    Мужской
    Если кто решил попробовать себя в вебпрограмминге советую скачать и установить пакет Denver. Бесплатный, на компе создает виртуальный сервер (типа разместил в инете). Есть описание на русском. Хостинг и доменное имя требуют денег, но можно попробовать бесплатно. Есть варианты.
     
    Сказал(-а) спасибо: Вишенка
  10. TopicStarter Overlay
    Юган

    Юган Здеся я))

    Регистрация:
    12 апр 2015
    Сообщения:
    0
    Поблагодарили:
    1.897
    Баллы:
    66
    Пол:
    Мужской
    В данной теме мы не касаемся веб-программирования, поэтому нам сервер не понадобиться.
    Далее маленький экскурс.

    HTML (HyperText Markup Language), что в переводе - язык гипертекстовой разметки.
    Чтобы браузер смог правильно обработать страницу, документ должен иметь расширение, как правило, - .html, .htm.

    Веб-программирование - разработка программ (скриптов) для динамических сайтов, обеспечивающих повышенную функциональность, принято разделять на клиентские языки программирования и серверные.
    Клиентские языки - это те языки программирования, которые выполняются на стороне клиента, т.е. браузером, например язык JS (javascript).
    Серверные языки - выполняются на сервере и клиенту отдаются уже готовые страницы после выполнения всех скриптов на этой странице. Некоторые серверные языки: PHP, Perl, Python, Ruby. Программы написанные на этих языках полностью зависят от сервера, где расположен сайт.

    Хорош офтопа, поехали.

    Тег <p> - Параграф, абзац. Это строчный элемент и как любой абзац начинается с новой строки, закрывающий тег - обязателен. Тег P не должен содержать в себе блочных элементов, например заголовки H1...H6.

    Код:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Тег P</title>
        </head>
    
        <body>
            <h1>Тег P</h1>
            <p>Мой первый параграф.</p>
            <p>Я строчный элемент и я не должен содержать в себе блочных элементов!!!</p>
            <p>Мой третий параграф.</p>
        </body>
    
    </html>
    
    Обратите внимание на <meta charset="utf-8">, этим мы говорим браузеру в какой кодировке читать наш файл.
    Смотрим что получилось:

    Kazam_screenshot_00021.png

    Как видите, каждый параграф начинается с новой строки.
    А что делать, если нам нужно перенести строку в рамках одного абзаца?
    В предыдущем посту я, вскользь, упомянул тег <br />, сейчас мы его применим.

    Код:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Тег P</title>
        </head>
    
        <body>
            <h1>Тег P</h1>
            <p>Мой первый параграф.</p>
            <p>Я строчный элемент и я не должен содержать в себе блочных элементов!!!<br /> Это мой второй параграф.</p>
            <p>Мой третий параграф.</p>
        </body>
    
    </html>
    
    Kazam_screenshot_00022.png

    Круто!

    --------------------------

    Каждый, наверное, пользуется при необходимости выделением текста: подчёркиванием, курсивом, полужирным, при написании поста.
    Только на этом форуме мы это делаем выделением текста мышкой и нажатием одной из кнопок:
    Kazam_screenshot_00023.png
    а остальное всё делает программа (скрипт).

    Ну мы же хотим это сделать сами, ага? Делаем.

    Тег <strong> (устаревший <b>) - текст, обёрнутый этими тегами, браузер отобразит полужирным шрифтом (жирным). Закрывающий тег обязателен!
    Код:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Тег STRONG</title>
        </head>
    
        <body>
            <h1>Тег STRONG</h1>
            <p>Это обычный текст. А это <strong>жирный текст.</strong> Опять обычный текст.</p>
        </body>
    
    </html>
    
    Kazam_screenshot_00024.png

    Тег <i> - курсив, закрывающий тег обязателен.
    Тег <u> - подчёркивание, закрывающий тег обязателен. На самом деле этот тег не рекомендован спецификацией HTML, вместо него рекомендуют использовать стили (CSS). Но об этом я расскажу позже.

    Задача:
    Создать страницу index.html и выделить отрезок в написанном тексте первого параграфа - курсивом. Во втором параграфе выделить отрезок текста - подчёркиванием.
    Внимание! Заголовок и тайтл должны содержать полную информацию о рассматриваемых тегах.
     
    Сказали спасибо: lef, Valeryn и Вишенка
  11. Вишенка

    Вишенка спелая

    Регистрация:
    9 апр 2015
    Сообщения:
    50
    Поблагодарили:
    7.039
    Баллы:
    83
    Пол:
    Женский
    @d4 класс!))

    У меня так никогда не получится, у мня мозгов на это не хватает @d30 до сих пор с содроганием вспоминаю школьный бейсик или как его там звали))))))
     
  12. lef

    lef Новая особа

    Регистрация:
    17 апр 2015
    Сообщения:
    6
    Поблагодарили:
    1.794
    Баллы:
    65
    Пол:
    Мужской
    Да ладно, "не получится".
    Отвечать на форуме, картинки вставлять, разным шрифтом писать получается.
    Эт тоже самое : )
     
    Сказали спасибо: Valeryn и Вишенка
  13. Вишенка

    Вишенка спелая

    Регистрация:
    9 апр 2015
    Сообщения:
    50
    Поблагодарили:
    7.039
    Баллы:
    83
    Пол:
    Женский
    угугугу))))
     
    Сказал(-а) спасибо: Valeryn
  14. Valeryn

    Valeryn

    Регистрация:
    6 июл 2015
    Сообщения:
    0
    Поблагодарили:
    527
    Баллы:
    36
    Пол:
    Мужской
    Если сильно захотеть, то все получится. :)
     
  15. lef

    lef Новая особа

    Регистрация:
    17 апр 2015
    Сообщения:
    6
    Поблагодарили:
    1.794
    Баллы:
    65
    Пол:
    Мужской
    [​IMG]
    Код:
    <!DOCTUPE html>
    <html>
          <head>
                <meta charset= "utf-"8>
                <title> Теги i и u </title>
          </head>
          <body>
            <h1> Тег i - курсив и тег u -подчеркивание</h1>
              <p> Первый параграф. Обычный текст.<br/>
              <i> Курсив:<br/>
                  Глухонемой грабитель в банке<br/>
                  устал кривляться и ушел    </i> </p>
              <p> Второй параграф. Обычный текст.<br/>
                 <u> Подчеркивание: <br/>
                 Забывшись академик Павлов<br/>
                 кормил собачку просто так</u></p>
          </body>
    </html>
    @r10
     

    Вложения:

    Сказал(-а) спасибо: Юган
  16. TopicStarter Overlay
    Юган

    Юган Здеся я))

    Регистрация:
    12 апр 2015
    Сообщения:
    0
    Поблагодарили:
    1.897
    Баллы:
    66
    Пол:
    Мужской
    teach 2.html - Никогда так не пиши. Пробелы не допустимы.
    Используй вместо пробела подчёркивание или дефис: teach_2.html, teach-2.html, teach2.html.
     
    Сказал(-а) спасибо: lef
  17. lef

    lef Новая особа

    Регистрация:
    17 апр 2015
    Сообщения:
    6
    Поблагодарили:
    1.794
    Баллы:
    65
    Пол:
    Мужской
    А-а-а... понял...

    -Уменянеработаетклавишапрбелачтомнеделать?
    _Настоящие_программисты_пробел_не_используют_!

    *****

    Вишенка, ты интересный собеседник : )

     
    Последнее редактирование: 30 янв 2016
    Сказали спасибо: Крок, Вишенка, Юган и 2 другие
  18. borman45

    borman45

    Регистрация:
    17 июн 2015
    Сообщения:
    0
    Поблагодарили:
    228
    Баллы:
    32
    Пол:
    Мужской
    А какой смысл? Щас программисты по сути и не нужны. Уже все итак создана весь софт.
     
  19. Крок

    Крок Особа

    Регистрация:
    10 апр 2015
    Сообщения:
    17
    Поблагодарили:
    978
    Баллы:
    47
    Почему, наоборот работы у них много сейчас.
    Вот я бы, к примеру хотел бы научиться дизассемблированию.
     
  20. TopicStarter Overlay
    Юган

    Юган Здеся я))

    Регистрация:
    12 апр 2015
    Сообщения:
    0
    Поблагодарили:
    1.897
    Баллы:
    66
    Пол:
    Мужской
    А этот софт чудесным образом создаётся и поддерживается сам, да?
     
  21. TopicStarter Overlay
    Юган

    Юган Здеся я))

    Регистрация:
    12 апр 2015
    Сообщения:
    0
    Поблагодарили:
    1.897
    Баллы:
    66
    Пол:
    Мужской
    Давно здесь не был, но продолжим.

    Рассмотрим тег <a> - этот тег, как правило , называют гиперссылкой (ссылка).
    Т.е., это часть текста, которая ведёт при клике на другой объект, браузерами подкрашивается в синий или голубой текст, и оборачивается этот текст в теги <a>Text</a>.

    Рассмотрим что из себя представляет гиперссылка, далее ссылка:
    • протокол доступа, может быть http:// или защищённый вариант https:// (у некоторых провайдеров обязателен, если это деньги: - интернет-магазин и тому подобное.)
    • далее идёт доменное имя, например у этого форума: party.os-oba.com
    • ну и дальше - путь к файлу, который нужно открыть, путь до файла разделяется косым слэшем: /
    • Закрывающий тег </a> - обязателен
    Ссылка содержит некоторые атрибуты (Некоторые рассмотрим), например:

    Код:
    <a href="http://to/my/path">Ссылка</a> <!-- Откроет страницу в этой вкладке браузера -->
    Код:
    <a href="http://to/my/path" target="_blank">Ссылка</a> <!-- Откроет страницу в новой вкладке браузера -->
    Дальше практика по усвоенному:

    Код:
    <!DOCTUPE html>
    <html lang="ru">
          <head>
                <meta charset= "utf-"8>
                <title>Гиперссылка</title>
          </head>
          <body>
               <h1>Учим тег <strong><a></strong></h1>
               <p>Есть замечательный сайт, который возвращает
                       <a href="http://os-oba.com">кэшбек</a>
               </p>
          </body>
    </html>
    
    Задача:
    Создать страницу .html и оформить ссылки:
    1. Курсивом
    2. Выделенным текстом (жирным)
    3. Подчёркиванием
    4. Перенаправлением (редирект) на указанный адрес в ссылке
    5. Редирект с открытие в новой вкладке.
     

Расскажите друзьям