Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
0 / 0 / 0
Регистрация: 28.11.2017
Сообщений: 44
1

Правила написания кода

31.01.2018, 23:54. Просмотров 729. Ответов 4

Всем привет!Читала о правильном написании кода, отступы, что был "елочкой", но до меня так и не дошло, как это на практике делается. Буду благодарна, если кто нибудь из профи посмотрит на код неуча и скажет про недочеты в самом коде и правильно ли код оформлен.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Gallery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <link rel="stylesheet" href="css/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/gallery.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/indonesian.css" type="text/css" media="screen" />
    <script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.1.5"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
</head>
<body>
<div class="menu">
    <div class="col-lg-5"><h1>Nusa Cafe. Coffee and Food </h1>
    </div>
<div class="navigation">
    <ul class="nav nav-pills">
        <li class="dropdown" style=" margin-right:85px;">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">
            <div class="colorist"> Menu </div>
            </a>
        </li>
        <li class="dropdown" style=" margin-right:85px;">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">
            <div class="colorist"> Welcome </div>
            </a>
        </li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">
            <div class="colorist"> Contact</div>
            </a>
        </li>
    </ul>
 </div>
 <div class="knop" style="margin-top:-45px;">
    <a href="#"><img src="pic/GB.png"></a>
    <a href="#"><img src="pic/RU.png"></a>
 </div>
 </div>
 
    <div id="wrapper">
        <center><h1>Welcome to our gallery</h1>
            <div class="firstPicture">
                <a class="fancybox" rel="gallery" href="pic/1.jpg" title="Inside Nusa Cafe">
                <img src="pic/1.jpg" alt="" />
                </a>
            </div>
        <p>
        <a class="fancybox" rel="gallery" href="pic/2.jpg" title="Inside Nusa Cafe">
            <img src="pic/2_1.jpg" alt="" />
        </a>
        <a class="fancybox" rel="gallery" href="pic/3.jpg" title="Inside Nusa Cafe">
            <img src="pic/3_1.jpg" alt="" />
        </a>
        <a class="fancybox" rel="gallery" href="pic/4.jpg" title="Inside Nusa Cafe">
            <img src="pic/4_1.jpg" alt="" />
        </a>
        </p>
        </center>
        
    </div>
</body>
</html>
Помогите новичку!Заранее спасибо
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
31.01.2018, 23:54
Ответы с готовыми решениями:

Правила написания кода
Я вот до сих пор не понимаю, как происходит такая вещь. Допустим: у меня есть Главная страница...

В чём ошибка написания html кода
Добрый день. Код: &lt;a class=&quot;tool-link-block&quot; onClick=&quot;videotool1.innerHTML='&lt;iframe width=&quot;512&quot;...

Программы для облегчения написания кода
Слышал, что есть инструмент, который появляется в браузере при нажатии f12. Что это?

Как подойти к созданию дизайна и разметки до написания кода ?
Собственно, какие этапы предшествуют ?

__________________
4
Модератор
Эксперт JSЭксперт HTML/CSS
3608 / 2522 / 1489
Регистрация: 12.07.2015
Сообщений: 6,476
Записей в блоге: 4
01.02.2018, 00:14 2
Сравнивайте

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="UTF-8" />
  <title>Gallery</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <link rel="stylesheet" href="css/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
  <link rel="stylesheet" href="css/gallery.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="css/indonesian.css" type="text/css" media="screen" />
  <script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.1.5"></script>
  <script type="text/javascript" src="js/script.js"></script>
  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
</head>
 
<body>
  <div class="menu">
    <div class="col-lg-5">
      <h1>Nusa Cafe. Coffee and Food </h1>
    </div>
    <div class="navigation">
      <ul class="nav nav-pills">
        <li class="dropdown" style=" margin-right:85px;">
          <a href="#" data-toggle="dropdown" class="dropdown-toggle">
            <div class="colorist">Menu</div>
          </a>
        </li>
        <li class="dropdown" style=" margin-right:85px;">
          <a href="#" data-toggle="dropdown" class="dropdown-toggle">
            <div class="colorist"> Welcome </div>
          </a>
        </li>
        <li class="dropdown">
          <a href="#" data-toggle="dropdown" class="dropdown-toggle">
            <div class="colorist"> Contact</div>
          </a>
        </li>
      </ul>
    </div>
    <div class="knop" style="margin-top:-45px;">
      <a href="#"><img src="pic/GB.png"></a>
      <a href="#"><img src="pic/RU.png"></a>
    </div>
  </div>
  <div id="wrapper">
    <center>
      <h1>Welcome to our gallery</h1>
      <div class="firstPicture">
        <a class="fancybox" rel="gallery" href="pic/1.jpg" title="Inside Nusa Cafe">
                <img src="pic/1.jpg" alt="" />
        </a>
      </div>
      <p>
        <a class="fancybox" rel="gallery" href="pic/2.jpg" title="Inside Nusa Cafe">
            <img src="pic/2_1.jpg" alt="" />
        </a>
        <a class="fancybox" rel="gallery" href="pic/3.jpg" title="Inside Nusa Cafe">
            <img src="pic/3_1.jpg" alt="" />
        </a>
        <a class="fancybox" rel="gallery" href="pic/4.jpg" title="Inside Nusa Cafe">
            <img src="pic/4_1.jpg" alt="" />
        </a>
      </p>
    </center>
  </div>
 
</body>
</html>
Лучше направить свои силы на что-то полезнее, а оформление производить автоматически. Если вы, конечно не в notepad'e код пишете.
И проверьте свой код на валидность.
И если работаете в команде, то лучше изначально обговорить размеры отступов.
1
0 / 0 / 0
Регистрация: 28.11.2017
Сообщений: 44
02.02.2018, 20:28  [ТС] 3
Спасибо!Нам на курсах говорят, что если писать код без отступов и т.д., то если хороший программист или работодатель посмотрит на код, то за такой код сразу -1 и скажут, что ты непрофессионал.
0
Модератор
Эксперт JSЭксперт HTML/CSS
3608 / 2522 / 1489
Регистрация: 12.07.2015
Сообщений: 6,476
Записей в блоге: 4
02.02.2018, 23:04 4
На выходе ваш код вообще может быть вообще такой, но вы к этому еще придёте позже
HTML5
1
<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> <title>Gallery</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <link rel="stylesheet" href="css/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen"/> <link rel="stylesheet" href="css/gallery.css" type="text/css" media="screen"/> <link rel="stylesheet" href="css/indonesian.css" type="text/css" media="screen"/> <script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.1.5"></script> <script type="text/javascript" src="js/script.js"></script> <link href="css/bootstrap.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet"></head> <body> <div class="menu"> <div class="col-lg-5"> <h1>Nusa Cafe. Coffee and Food </h1> </div><div class="navigation"> <ul class="nav nav-pills"> <li class="dropdown" style=" margin-right:85px;"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <div class="colorist">Menu</div></a> </li><li class="dropdown" style=" margin-right:85px;"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <div class="colorist"> Welcome </div></a> </li><li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <div class="colorist"> Contact</div></a> </li></ul> </div><div class="knop" style="margin-top:-45px;"> <a href="#"><img src="pic/GB.png"></a> <a href="#"><img src="pic/RU.png"></a> </div></div><div id="wrapper"> <center> <h1>Welcome to our gallery</h1> <div class="firstPicture"> <a class="fancybox" rel="gallery" href="pic/1.jpg" title="Inside Nusa Cafe"> <img src="pic/1.jpg" alt=""/> </a> </div><p> <a class="fancybox" rel="gallery" href="pic/2.jpg" title="Inside Nusa Cafe"> <img src="pic/2_1.jpg" alt=""/> </a> <a class="fancybox" rel="gallery" href="pic/3.jpg" title="Inside Nusa Cafe"> <img src="pic/3_1.jpg" alt=""/> </a> <a class="fancybox" rel="gallery" href="pic/4.jpg" title="Inside Nusa Cafe"> <img src="pic/4_1.jpg" alt=""/> </a> </p></center> </div></body></html>
0
20 / 31 / 14
Регистрация: 15.01.2017
Сообщений: 294
03.02.2018, 13:20 5
отступ ради - "красивого словца"..! Вот, у тебя полотно кода и = в нем ТЕБЕ...! Ориентироваться на местности" нужно а, в дальнейшем редактировать...... В построении кода и будет профессионализм.. Логика ...?
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
03.02.2018, 13:20

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

А какие есть способы написания кода с параллельным просмотром в браузере?
Типа LiveReload, или по принципу редактора Brackets. подскажите, пожалуйста, все способы,...

Как разбить экран монитора на два, для удобства написания кода
Добрый день. Вот слышал что есть какие то проги которые дают возможность разбить экран монитора на...

Есть ли определенные правила написания кода на паскале, обеспечивающие максимальную эффективность по памяти и времени?
Есть ли определенные правила написания кода на паскале, обеспечивающие максимальную эффективность...

Правила написания ТЗ
Что необходимо указывать в первичном тех.задании? Я имею ввиду такое, чтобы пользователи, лишь...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.