1. Гость, мы просим Вас ознакомиться с Правилами Форума и Отказом от ответственности!

Создаем страницу

Тема в разделе 'HTML и CSS', создана пользователем roslimberg, 1 дек 2011.

Страница 1 из 2
  1. TopicStarter Overlay
    roslimberg

    roslimberg Пользователи

    Сообщения:
    24
    Лайки:
    8
    Пол:
    Мужской
    Репутация:
    0
    Команда:
    kDesign
    Самое начало начал​

    ​

    <html> - после этой строки начинается ваша HTML страница
    т.е. мы показываем что хотим html страницу, а не <?php

    <head> - это голова страницы. Располагаться после <html>. В него вписываются: <title>, <meta...>-теги
    и подключаемые скрипты и файлы css.

    <meta name="description" content="Kapaмel Design" /> - 'дескрипшен(description)' - используется как обзываловка вашего сайта для поисковика,
    т.е. щас мы обозвались Kapaмel Design.

    <meta name="keywords" content="i, я, you, ты" /> - используется для поиска по ключевым словам, ключевые слова необходимо записывать через запятые, например когда в поиске введешь одно из 'i, я, you, ты' то среди найденых результатов будет и Ваш сайт.

    <title>kDesign</title>

    <title> - отвечает за название вашей страницы, если не указать его, то ваша страница будет иметь название нето, которые бы Вы хотели, а адрес данной страницы.
    </title> - закрываем.

    <script type="text/javascript" - показываем, что мы хотим добавить скрипт в нашу страницу.
    src="путь_к_файлу"> - сдесь указываем путь к скрипту
    </script> - закрываем.


    В полном виде:

    <script type="text/javascript" src="js/myscript.js"></script> - здесь полностью показана команда подключение скрипта и на примере мы добавили myscript.js, который лежит в папке js.
    Команда может повторяться бесконечное количество раз.

    <link rel="stylesheet" type="text/css" - показываем, что мы хотим добавить таблицу стилей css в нашу страницу.
    href="путь_к_файлу" /> - тут также указываем путь к файлу и закрываем


    В полном виде:

    <link rel="stylesheet" type="text/css" href="css/style.css" /> - мы показали, что подключили style.css, которая находиться в папке css.

    Так же мы можем сразу включить скрипт или css без подключение файла, смотрим...


    Прописываем скрипт:

    <script language="javascript" type="text/javascript">
    тут ваш скрипт
    </script> - закрываем.


    Прописываем таблицу стилей css

    <style type="text/css">
    /* тут ваши таблици стилей */
    /* например изменяем фон */

    body, html {
    background:url(img/body_bg.jpg);
    /* на фон страницы мы устанавливаем картинку и указываем к ней путь. */

    background-repeat: no-repeat;
    /* тут у нас спрашивают, как повторять картинку?
    если repeat-y картинка будет повторяться по оси y, влево и вправо, если укажем repeat-x картинка будет повторяться по оси x, вверх и вниз, но у нас сейчас стоит no-repeat, т.е. изображение повторяться небудет. */

    background-position: top center;
    /* у нас сейчас спрашивают позицию нашего изображения, top center - по центру, left top - будет стоять слева, right top - справо. */

    background-color: #e3e3e3;
    /* указываем какой цвет фона будет у нашего сайта. #цвет. */

    </style> - закрываем.

    </head> - итак мы закончили работать с хеадом.

    <body> - особого влияния на объекты неоказывает, но если объекты прописаны между тегами <body> и </body> как их атрибуты

    Например
    <body bgcolor="#ff0000">Это сайт Васи.</body>
    <body background="img/vasya.jpg">Это сайт не Васи.<body>

    То есть тег <body> будет распростроняться только до </body>


    Мелочи html​

    <br /> - опускаем стркоу вниз

    <b> жирный шрифт </b>

    <strong> жирный шрифт </strong>

    <u> подчерткнутый шрифт </u>

    <i> курсив </i>

    <center> позиция по центру </center>

    <p align="center"> позиция по центру </p>

    <div align="center"> позиция по центру </div>

    <p align="left"> позиция по левому краю </p>

    <div align="left"> позиция по левому краю </div>

    <p align="right"> позиция по правому краю </p>

    <div align="right"> позиция по правому краю </div>

    <a href="http://адрес">Название</a>

    <img src='http://путь к картинке' width="" height="0" border="0" />

    Не буду перечислять дальше

    </body> - закрываем боди.
    </html> - закрываем нашу html страницу. Удачи Вам :mellow:



    html page
    HTML:
    <html><head><meta name="description" content="Kapaмel Design" /><meta name="keywords" content="i, я, you, ты" /><title>kDesign</title><script type="text/javascript" src="js/myscript.js"></script><link rel="stylesheet" type="text/css" href="css/style.css" /><script language="javascript" type="text/javascript">тут ваш скрипт</script><style type="text/css">body, html {	background:url(img/body_bg.jpg);	background-repeat: no-repeat;        background-position: top center;        background-color: #e3e3e3;</style></head><body><br /><b>Привет!</b><br /><strong>Пошел вон!</strong><br /><u>курва....</u></body></html>


    Если кому помогу, то от +сега неоткажусь)
    roslimberg, 1 дек 2011
    #1
    3 пользователям это нравится.
  2. MorzE

    MorzE nullptr AngeliCore Пользователи

    Сообщения:
    198
    Лайки:
    134
    Пол:
    Мужской
    Репутация:
    3
    Страна:
    Russian Federation Russian Federation
    И вы никогда не увидите своей картинки.
    MorzE, 1 дек 2011
    #2
    1 человеку нравится это.
  3. Botchal

    Botchal MMORPG-DEVS.RU Пользователи

    Сообщения:
    182
    Лайки:
    66
    Репутация:
    0
    нуу.. смотря какой браузер, некоторые не делают 0 px а делают 1 px + ширина не заполнена, тоже по разному сделают, в одних будет просто отступ если следующий элемент inline'ом стоит, ну а в некоторых действительно ничё не будет))
    Botchal, 1 дек 2011
    #3
  4. Botchal

    Botchal MMORPG-DEVS.RU Пользователи

    Сообщения:
    182
    Лайки:
    66
    Репутация:
    0
    И ещё... задолбали пол рунета писать в непарных тегах /> вместо > как никак в эпоху html 5 живём...)
    Botchal, 1 дек 2011
    #4
  5. Botchal

    Botchal MMORPG-DEVS.RU Пользователи

    Сообщения:
    182
    Лайки:
    66
    Репутация:
    0
    Не используй background-repeat и background-position пиши всё в background
    Код:
    background:url(img/body_bg.jpg) top center no-repeat;
    Botchal, 1 дек 2011
    #5
  6. Botchal

    Botchal MMORPG-DEVS.RU Пользователи

    Сообщения:
    182
    Лайки:
    66
    Репутация:
    0
    Зачем атрибут language ?он не актуален лет этак 5
    Botchal, 1 дек 2011
    #6
  7. TopicStarter Overlay
    roslimberg

    roslimberg Пользователи

    Сообщения:
    24
    Лайки:
    8
    Пол:
    Мужской
    Репутация:
    0
    Команда:
    kDesign
    background: #000 url(img/body_bg.jpg) top center no-repeat;

    можно итак, но я расписал подробнее
    roslimberg, 2 дек 2011
    #7
  8. TopicStarter Overlay
    roslimberg

    roslimberg Пользователи

    Сообщения:
    24
    Лайки:
    8
    Пол:
    Мужской
    Репутация:
    0
    Команда:
    kDesign
    Конечно красивей и удобней будет так

    #logo {
    ...
    }

    <div id="logo">...</div>

    но я почему-то выбрал <ing src... )
    roslimberg, 2 дек 2011
    #8
  9. MorzE

    MorzE nullptr AngeliCore Пользователи

    Сообщения:
    198
    Лайки:
    134
    Пол:
    Мужской
    Репутация:
    3
    Страна:
    Russian Federation Russian Federation
    Выделяю жирным шрифтом, коль не понимаете.
    MorzE, 2 дек 2011
    #9
  10. TopicStarter Overlay
    roslimberg

    roslimberg Пользователи

    Сообщения:
    24
    Лайки:
    8
    Пол:
    Мужской
    Репутация:
    0
    Команда:
    kDesign
    А незаметил, тоды height="0px"
    roslimberg, 2 дек 2011
    #10
  11. MorzE

    MorzE nullptr AngeliCore Пользователи

    Сообщения:
    198
    Лайки:
    134
    Пол:
    Мужской
    Репутация:
    3
    Страна:
    Russian Federation Russian Federation
    Ну еще блеать лучше. Каких хером картинку будет видно, если у нее высота 0 пикселей?
    MorzE, 2 дек 2011
    #11
  12. alexdnepro

    alexdnepro Эксперт AngeliCore Пользователи Open Source Contributor White List

    Сообщения:
    753
    Лайки:
    1.311
    Пол:
    Мужской
    Репутация:
    6
    facepalm
    alexdnepro, 2 дек 2011
    #12
  13. Tolstes2012

    Tolstes2012 blacklist Пользователи

    Сообщения:
    48
    Лайки:
    5
    Пол:
    Мужской
    Репутация:
    0
    Команда:
    Bss-Team
    Даже Алекс не удержался :mellow:
    Tolstes2012, 2 дек 2011
    #13
  14. TopicStarter Overlay
    roslimberg

    roslimberg Пользователи

    Сообщения:
    24
    Лайки:
    8
    Пол:
    Мужской
    Репутация:
    0
    Команда:
    kDesign
    Извини, ты идиот? Наверно люди додумаются указать размер своей картинки.
    roslimberg, 2 дек 2011
    #14
  15. Tolstes2012

    Tolstes2012 blacklist Пользователи

    Сообщения:
    48
    Лайки:
    5
    Пол:
    Мужской
    Репутация:
    0
    Команда:
    Bss-Team
    А ты сам не идиот? Мог бы написать так "где стоит 0 изменяем на высоту и широту своей картинки примером <img src='http://путь к картинке' width="" height="100" border="500" />"....
    Tolstes2012, 2 дек 2011
    #15
  16. TopicStarter Overlay
    roslimberg

    roslimberg Пользователи

    Сообщения:
    24
    Лайки:
    8
    Пол:
    Мужской
    Репутация:
    0
    Команда:
    kDesign
    месяца 2 назад я уже подробно расписывал это.
    roslimberg, 2 дек 2011
    #16
  17. alexdnepro

    alexdnepro Эксперт AngeliCore Пользователи Open Source Contributor White List

    Сообщения:
    753
    Лайки:
    1.311
    Пол:
    Мужской
    Репутация:
    6
    А проще всего вообще не указывать размер картинки, и тогда она будет автоматически задана.
    alexdnepro, 2 дек 2011
    #17
  18. TopicStarter Overlay
    roslimberg

    roslimberg Пользователи

    Сообщения:
    24
    Лайки:
    8
    Пол:
    Мужской
    Репутация:
    0
    Команда:
    kDesign
    угу
    roslimberg, 2 дек 2011
    #18
  19. MorzE

    MorzE nullptr AngeliCore Пользователи

    Сообщения:
    198
    Лайки:
    134
    Пол:
    Мужской
    Репутация:
    3
    Страна:
    Russian Federation Russian Federation
    Уже начал писать такой ответ и увидел этот пост)
    Однако ты указан 0
    MorzE, 2 дек 2011
    #19
  20. TopicStarter Overlay
    roslimberg

    roslimberg Пользователи

    Сообщения:
    24
    Лайки:
    8
    Пол:
    Мужской
    Репутация:
    0
    Команда:
    kDesign
    ._.
    roslimberg, 2 дек 2011
    #20
Страница 1 из 2
Черновик сохранён Черновик удалён

Поделиться этой страницей