html पृष्ठाची रुंदी कशी सेट करावी. पृष्ठाचा आकार कसा सेट करायचा. सानुकूल पृष्ठ आकार तयार करणे

Android साठी 17.04.2019
चेरचर

HTML पृष्ठ कसे तयार करावे याबद्दल आश्चर्य वाटत आहे? हे करण्यासाठी, तुम्हाला अनेक तास घालवावे लागतील, आणि तुम्हाला कळेल आणि तुम्ही तुमचे पहिले पेज ५ मिनिटांत तयार करू शकता.

HTML म्हणजे हायपरटेक्स्ट मार्कअप लँग्वेज. अनुवादित याचा अर्थ "भाषा हायपरटेक्स्ट मार्कअप". हे समजून घेणे महत्त्वाचे आहे की HTML ही प्रोग्रामिंग भाषा नाही तर साइट मार्कअप भाषा आहे.

सर्व आधुनिक ब्राउझरते कसे ओळखायचे ते माहित आहे. ते नंतर माहिती प्रदर्शित करतात सोयीस्कर फॉर्मवापरकर्त्यासाठी, लेखकाच्या आगाऊ हेतूनुसार.

ही भाषा विशेष टॅग वापरते. प्रत्येक टॅग स्वतःचे कार्य करतो. त्यापैकी बरेच आहेत. आदर्शपणे, आपल्याला सर्वकाही शिकण्याची आवश्यकता आहे. पण नवशिक्यासाठी मूलभूत ज्ञानपुरेशी.

HTML मूलभूत

आपण HTML पृष्ठ तयार करण्यापूर्वी, आपल्याला हे माहित असणे आवश्यक आहे की त्यात काय समाविष्ट आहे. या भाषेत दोन संकल्पना आहेत: घटक आणि टॅग.

ओपनिंग आणि क्लोजिंग टॅगचा वापर घटक कुठे सुरू होतो आणि कुठे संपतो हे दर्शविण्यासाठी केला जातो. असे दिसते.

<открывающий тег>सामग्री

तुम्ही बघू शकता, ओपनिंग आणि क्लोजिंग टॅगमधला फरक फक्त "/" आहे.

संपूर्ण HTML दस्तऐवज हा या घटकांचा संग्रह आहे. दस्तऐवजाच्या संरचनेसाठी काही आवश्यकता आहेत. सर्व पृष्ठ सामग्री दोन टॅग दरम्यान असणे आवश्यक आहे आणि. तुम्ही कोड लिहिता तेव्हा, ओपनिंग आणि क्लोजिंग टॅग समाविष्ट करण्याची सवय लावा.

तसेच रचना लक्षात ठेवा HTML भाषास्वतःचे पदानुक्रम आहे. अन्यथा त्याला घरटी म्हणतात. सर्वात महत्वाचे आहे, कारण इतर सर्व त्यात आहेत.

HTML मध्ये दोन मूल घटक आहेत:

  • ... ;
  • ..

    .

हेड ब्लॉक विविध सूचित करते मालकीची माहिती. ही माहिती ब्राउझरमध्ये प्रदर्शित होत नाही. उदाहरणार्थ, विकासकांसाठी सूचना, कोणत्याही प्रोग्रामसाठी, रोबोटसाठी आणि बरेच काही.

सर्वात महत्वाची गोष्ट अशी आहे की येथे कोणतीही सामग्री नाही.

BODY विभाग दस्तऐवज सामग्री निर्दिष्ट करतो जी वापरकर्त्याला प्रदर्शित केली जाईल.

ताबडतोब उघडा आणि बनवायला शिका बंद टॅग, कारण 10 नेस्टेड घटक असू शकतात. याव्यतिरिक्त, सोयीसाठी, नेस्टेड टॅग इंडेंट करण्याची शिफारस केली जाते. उदाहरणार्थ, यासारखे.



हे केले जाते जेणेकरून समान महत्त्व असलेले टॅग समान स्तरावर असतील आणि चाइल्ड टॅग "आत" असतील. हे कोडचा योग्य भाग समजून घेणे आणि शोधणे खूप सोपे करते. अन्यथा तुमचा गोंधळ होऊ शकतो. परंतु जागा वाचवण्यासाठी, शरीर स्वतःच इंडेंटेशनशिवाय केले जाऊ शकते. हे केले जाते जेणेकरून इतर प्रत्येकास अतिरिक्त इंडेंटेशन नसेल. बाकी सर्व वेगळे करणे उचित आहे.

एक साधे HTML पृष्ठ कसे तयार करावे

कोड लिहिण्यासाठी तुम्हाला एक प्रकारचा संपादक आवश्यक आहे. त्यापैकी बरेच आहेत. लोकप्रिय आहेत Notepad++ आणि Adobe Dreamweaver. तुम्ही नोटपॅड देखील वापरू शकता.

Notepad++ संपादक असे दिसते.

हे खूप आहे सोयीस्कर संपादकआणि त्याच वेळी विनामूल्य. वरील Adobe Dreamweaver ही सशुल्क आवृत्ती आहे. लेखनासाठी डिझाइन केलेले संपादक आणि नोटपॅडमधील फरक हा आहे की विशेष टॅग हायलाइट केले जातात. जर ते हायलाइट केले नसेल तर तुम्ही ते चुकीचे लिहिले आहे.

बॅकलाइट भाषेशी जुळण्यासाठी, ते सेटिंग्जमध्ये निर्दिष्ट करणे आवश्यक आहे.

कसे तयार करायचे ते पाहू HTML पृष्ठनोटपॅडमध्ये. म्हणजे संपवू तांत्रिक भागआणि मग आम्ही थेट टॅगचा अभ्यास करू.

एचटीएमएल नोटपॅडमध्ये वेब पृष्ठ कसे तयार करावे

प्रारंभ करण्यासाठी, नोटपॅड उघडा.

नंतर खालील स्क्रीनशॉटमध्ये काय सूचित केले आहे ते टाइप करा.

नुसती कॉपी न करता हाताने लिहिण्याची सवय लावा. जेव्हा तुम्ही तुमच्या हातांनी लिहिता तेव्हा तुम्हाला संपूर्ण टॅग बेस चांगल्या प्रकारे लक्षात ठेवा.

यानंतर, आपण ब्राउझरमध्ये फाइल उघडू शकता आणि निकालाची प्रशंसा करू शकता. HTML Notepad मध्ये वेबपेज कसे तयार करायचे ते आता तुम्हाला समजले पाहिजे.

जागतिक कंसोर्टियम W3C

W3C नावाची एक संस्था आहे, जी इंटरनेटसाठी सर्व मानके विकसित आणि लागू करते. सर्व ब्राउझर या मानकांचे पालन करतात आणि या नियमांनुसार पृष्ठ मार्कअप (कोड) प्रक्रिया करतात.

एचटीएमएल भाषेच्या विकसकांच्या अधिकृत वेबसाइटवर आपण सर्व टॅग आणि त्यांच्या वापरासाठी नियमांसह एक टेबल शोधू शकता. या लेखात आम्ही सर्वात मूलभूत गोष्टींचा विचार करतो.

तुम्ही विचार करत असाल, नियम काय असू शकतात? वर्णन केलेल्या सर्व टॅगची स्वतःची शिफारस आहे. त्यापैकी अनेक आहेत:

  • पर्यायी टॅग.
  • निषिद्ध.
  • रिक्त टॅग.
  • कालबाह्य
  • हरवले.

HTML मध्ये टॅग

तुम्ही एचटीएमएल पेज तयार करण्यापूर्वी, तुम्हाला हेड सर्व्हिस पार्टमध्ये काय असावे हे समजून घेणे आवश्यक आहे.

HEAD क्षेत्रामध्ये आवश्यक आणि पर्यायी दोन्ही टॅग असतात. TO आवश्यक टॅगशीर्षक संदर्भित करते. हे नियुक्त केले आहे शीर्षक. हे संपूर्ण दस्तऐवजासाठी नियुक्त केले आहे. आणि आपण परिणामांमध्ये काय पहाल शोध इंजिन Google हे शीर्षक टॅग आहे.

चला बॉडी विभागाकडे जाऊया. असे घटक आहेत जे ब्राउझरमध्ये प्रदर्शित केले जातात आणि असे देखील आहेत जे नाहीत. उदाहरणार्थ, टिप्पण्या वापरकर्त्यास प्रदर्शित केल्या जात नाहीत. जर तुम्ही टीममध्ये काम करत असाल तर ते नोट्ससाठी किंवा इतर कर्मचाऱ्यांना सूचना देण्यासाठी वापरले जाऊ शकतात.

ते म्हणून नियुक्त केले आहेत

मधले सगळे, कार्यक्रमाद्वारे असे मानले जाते. कृपया लक्षात घ्या की तुम्ही दुसऱ्या टिप्पणी टॅगमध्ये टिप्पणी टॅग नेस्ट करू शकत नाही. कारण एकदा उघडा.

अशा घरट्यांचे उदाहरणः

पहिल्या टिप्पणीची सुरुवात -->

ब्राउझरमधील परिणाम खालीलप्रमाणे असेल

पहिल्या टिप्पणीची सुरुवात -->

येथे एक तुकडा आहे दिसणार नाही. दुसरा ओपनिंग टॅग


Результат:

В этом примере мы создали блок div и вложили в него абзац p с текстом. Для div-а мы строго задали размеры 300 на 300 пикселей. У элемента p значения свойств width и height равны auto, поэтому как видно на скриншоте, его ширина установилась равной ширине родительского элемента, а высота стала такой, чтобы в нем поместился весь содержащийся в абзаце текст.

Теперь изменим css настройки для абзаца p и зададим фиксированные размеры:

Layer2 {
background: #eee;
width:250px;
}

Результат:

Как видим ширина абзаца стала уже и равна 250 пикселей, а его высота увеличилась так, чтобы уместился текст, так как параметр height остался равным auto.

Теперь давайте зададим высоту и ширину абзаца в процентах:

Layer2 {
background: #eee;
width:50%;
height:50%;
}

Результат:

Как видно на картинке, ширина элемента p стала равна половине ширины элемента div. А высота увеличилась и стала равна 75 процентам высоты div.

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

Определить минимальную ширину и высоту можно с помощью атрибутов min-width и min-heigh:

min-width: <ширина>
min-height: <высота>

Аналогичные атрибуты стиля max-width и max-height позволяют задать максимальные размеры:

max-width: <ширина>
max-height: <высота>

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

Стоит уточнить, что задание параметров height и width имеет смысл только для блочных тегов , так как для строчных элементов эти параметры браузером не обрабатываются.

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

Например, уменьшим размеры абзаца p из выше рассмотренных примеров до 100 пикселей:

Layer2 {
background: #eee;
width:100px;
height:100px;
}

Результат:

Как видно, текст вышел за границы абзаца и выглядит это не очень красиво. Для избежания подобных ситуаций существует правило css — overflow.

Параметр переполнения overflow для скрытия (hidden, visible) или прокрутки (scroll, auto) контента

Переполнение контента может возникнуть, когда ограничивают и ширину и высоту элемента. Рассмотрим два абзаца:

Текст первого абзаца


Текст второго абзаца

Результат:

Так как ни ширина ни высота для абзацев не заданы, то браузер самостоятельно рассчитывает их исходя из своего собственного понимания значения auto. В результате абзацы по ширине заняли все доступное пространство, а по высоте в соответствии с содержащимся в них контентом.

Теперь у первого абзаца ограничим ширину:

Текст первого абзаца


Текст второго абзаца

Результат:

Ширина абзаца ожидаемо уменьшилась, а высота установилась такой, чтобы вместить в себя весь текст.

Ну а теперь ограничим у первого абзаца и высоту:

Текст первого абзаца


Текст второго абзаца

В результате получилось, что текст в такой ограниченный абзац не влазит и поэтому он наехал на область нижнего соседа. Соответственно прочитать текст ни в первом ни во втором абзацах практически не возможно. Именно для управления поведением контента в таких ситуациях существует правило overflow :

overflow: visible|hidden|scroll|auto|inherit

По умолчанию overflow принимает значение visible, которое сообщает браузеру, чтобы он отображал содержимое не уместившееся в контейнере. Результат можно увидеть на примере выше.

Правило скрывает все, что не помещается в контейнере:

Значение scroll отобразит в элементе по вертикали и горизонтали полосы прокрутки даже в том случае, если все содержимое умещается:

Текст первого абзаца


Текст второго абзаца

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

Текст первого абзаца


Текст второго абзаца

Результат:

Для настройки полос прокрутки можно также использовать атрибуты стиля overflow-x и overflow-y, которые позволяют настраивать отображение прокрутки по отдельным осям. Таким образом отвечает за горизонтальную ось , а за вертикальную ось .

Поэтому если вам, например, нужно чтобы в абзаце горизонтальная прокрутка не появлялась никогда, а вертикальная появлялась только по необходимости, то достаточно написать следующее правило css:

p{overflow-x:hidden;overflow-y:auto;}

И задача будет решена.

На этом все. До новых встреч. Не забудьте подписаться на обновления блога и буду благодарен если воспользуетесь кнопочками социальных сетей.



आम्ही वाचण्याची शिफारस करतो

वर