Как изменить содержимое html файла - Исправление ошибок и поиск оптимальных решений проблем

Download Article

If you prefer to code websites by hand, you can edit HTML files in a basic text editor like Notepad (Windows) or TextEdit (macOS). If you would rather be able to move elements around on the screen and see live previews, you can use a WYSIWYG (What You See Is What You Get) editor like Dreamweaver or Kompozer. This wikiHow teaches you how to open and edit an HTML file in a standard or visual editing app.

1

Click the Windows Start button

. It’s the button that has a Windows logo in the task bar. By default, it’s in the lower-left corner. This displays the Start menu
2

Type Notepad. This displays Notepad in the Start menu.

Advertisement
3

Click Notepad. It has an icon that resembles a notepad with a blue cover.
4

Click File. It’s at the top of the menu bar in Notepad. This displays a drop-down menu. This displays a file browser you can use to open files in Notepad.
5

Click Open. It’s the second option in the File drop-down menu.
6

Select «All files» in the file type drop-down menu. Click the drop-down that says «Text Documents (.txt)» and select «All files» in the drop-down menu. This displays all document types (including HTML files) in the file browser.
7
Select an HTML file and click Open. This opens the HTML document in Notepad. You can edit the HTML code in Notepad.
- Alternatively, you can create a new HTML document in Notepad.
8
Edit the HTML code. In order to edit HTML in Notepad, you’ll need to learn HTML so that you can edit it by hand. Common elements you can edit include the following.
- <!DOCTYPE html>: This goes at the top of the HTML document. This tells the web browser that this is an HTML document.
- <html></html>: These tags go at the top and bottom of the HTML document. This indicates where the HTML code starts and stops.
- <head></head>: These tags go at the top of the HTML document. They indicate where the head of the HTML document starts and stops. The head of the HTML document contains information that is not seen on the web page. This includes the page title, metadata, and CSS
- <title>Page Title</title>: These tags indicate the title the page. The title goes in the head of the HTML document. Type the title of the page in between these two tags.
- <body></body>: These tags indicate where the body of the HTML document starts and stops. The body is where all the web page content is written. The body comes after the head in the HTML document.
- <h1>Headline Text</h1>: These tags create headline tags. The text in between the «<h1>» and «</h1>» tags appears as a large bold text. Text goes in the body of the HTML document.
- <p>Paragraph Text</p>: These tags are used to create paragraph text in an HTML document. The text that goes in between «<p>» and «</p>» appears as normal sized text. Text goes in the body of the HTML document.
- <b>Bold Text</b>: These tags are used to create bold text. The text that goes in between «<b>» and «</b>» appears as bold text.
- <i>Italic Text</i>: These tags are used to create italic text. The text that goes in between «<i>» and «</i>» appears as itallic text.
- <a href="URL">Link text</a>: This tag is used to link to another website. Copy the web address you want to link to and paste it where it says «URL» (in between the quotation marks). The the text for the link where it says «Link text» (no quotation marks needed).
- <img src="image URL">: This tag is used to post an image using HTML. Replace teh text that says «image URL» with the web address of the image.
9

Click File. It’s in the menu bar at the top of the screen.
10
Click Save As. This opens a dialogue box you can use to save your file.
- To save the file as it’s existing name and file type, just click Save in the drop-down menu below «File».
11

Select «All Files». Use the drop-down menu next to Save as Type» to select «All Files».
12

Type a name for the file. Use the box next to «File Name» to type a name for the file.
13

Type .html at the end of the file. After you type a name for the file in the «File Name» box, add the extension «.html» at the end of the file name. Without this extension, it will save the file as a .txt file, instead of an HTML file.
14

Click Save. This saves the file.

1

Click the magnifying glass icon

. It’s in the upper-right corner of the Mac desktop. This displays a search bar.
2

Type TextEdit in the search bar. This displays a list of apps that match your search result.
3

Click TextEdit.app. It’s at the top of the search results. It’s next to an icon that resembles a sheet of paper and a pen.
4

Click File. It’s at the menu bar at the top of the screen when TextEdit is open.
5

Click Open. This opens a file browser you can use to navigate your Mac and open files.
6

Click an HTML file and click Open. HTML files have an extension that says «.html» after the file name. Use the file browser to navigate to an HTML file and click it to select it. Then click Open to open the HTML file in TextEdit.
7
Edit the HTML code. You can use TextEdit to edit HTML code on make. You need to learn HTML so that you can edit it by hand. Common elements you can edit include the following.
- <!DOCTYPE html>: This goes at the top of the HTML document. This tells the web browser that this is an HTML document.
- <html></html>: These tags go at the top and bottom of the HTML document. This indicates where the HTML code starts and stops.
- <head></head>: These tags go at the top of the HTML document. They indicate where the head of the HTML document starts and stops. The head of the HTML document contains information that is not seen on the web page. This includes the page title, metadata, and CSS
- <title>Page Title</title>: These tags indicate the title the page. The title goes in the head of the HTML document. Type the title of the page in between these two tags.
- <body></body>: These tags indicate where the body of the HTML document starts and stops. The body is where all the web page content is written. The body comes after the head in the HTML document.
- <h1>Headline Text</h1>: These tags create headline tags. The text in between the «<h1>» and «</h1>» tags appears as a large bold text. Text goes in the body of the HTML document.
- <p>Paragraph Text</p>: These tags are used to create paragraph text in an HTML document. The text that goes in between «<p>» and «</p>» appears as normal sized text. Text goes in the body of the HTML document.
- <b>Bold Text</b>: These tags are used to create bold text. The text that goes in between «<b>» and «</b>» appears as bold text.
- <i>Italic Text</i>: These tags are used to create italic text. The text that goes in between «<i>» and «</i>» appears as itallic text.
- <a href="URL">Link text</a>: This tag is used to link to another website. Copy the web address you want to link to and paste it where it says «URL» (in between the quotation marks). The the text for the link where it says «Link text» (no quotation marks needed).
- <img src="image URL">: This tag is used to post an image using HTML. Replace teh text that says «image URL» with the web address of the image.
8

Click File. It’s in the menu bar at the top of the screen.
9
Click Save. It’s in the drop-down menu below «File». This saves the HTML file.
- To change the name of the file, click Rename in the «File» drop-down menu. Type a new name for the file at the top of the screen. Be sure to include the «.html» extension at the top of the page.

1
Open Dreamweaver. Dreamweaver has an icon that resembles a green square that says «Dw» in the middle. Click the icon in the Windows Start menu, or Application folder on Mac to open Dreamweaver.
- Adobe Dreamweaver requires a subscription. You can purchase a subscription starting at $20.99 a month.
2

Click File. It’s in the menu bar at the top fo the screen.
3

Click Open. It’s in the drop-down menu below «File».
4

Select an HTML document and click Open. Use the file browser to select an HTML document on your computer and click it to select it. Then click Open in the lower-right corner.
5

Click Split. It’s the middle tab at the top of the page. This displays a split screen that contains an HTML editor on the bottom and a preview screen on top.^[1]
6
Edit the HTML document. Use the HTML editor to edit HTML. The way you edit HTML in Dreamweaver isn’t too different from editing HTML in Notepad or TextEdit. As you type an HTML tag, a search menu will appear with matching HTML tags. You can click the HTML tag to insert its opening and closing tags. Dreamweaver will check to make sure there are opening and closing tags for all your HTML elements.
- Alternatively, you can click where you want to insert an HTML element in the HTML editor and click Insert in the menu bar at the top of the screen. Click the item you want to insert in the drop-down menu to add the HTML code automatically.
7

Click File. When you are done editing the HTML document, click File in the menu bar at the top of the screen.
8

Click Save. It’s in the drop-down menu below File. This saves your HTML document.

1

Go to https://sourceforge.net/projects/kompozer/ in a web browser. You can use any web browser on PC or Mac. This is the download page for Kompozer. It is a free HTML (WYSIWYG) editor that works on both Windows and Mac.
2

Click Download. It’s the green button near the top of the page. This takes you to a separate download page. After a 5 second delay, your download will begin.
3
Double-Click the Install file. By default, your downloaded files can be found in your «Downloads» folder on PC or Mac. You can also click on them in your web browser to launch the Kompozer installer. Use the following instructions to install Kompozer:
- Windows:
  - If asked if you want to allow the installer to make changes to your system, click Yes.
  - Click Next in the intro windows.
  - Click the radial button next to «I accept the agreement» and click Next.
  - Click Next to use the default install location or click Browse to select a different install location.
  - Click Next and then click Next again
  - Click Install
  - Click Finish
- Mac:
  - Double-click the Kompozer install file.
  - Click KompoZer.app
  - Click the Apple icon in the upper-left corner.
  - Click System Preferences
  - Click Security and Privacy
  - Click the General tab.
  - Click Open Anyway near the bottom of the window.
  - Click Open in the pop-up Window.
  - Drag the Kompozer icon to your desktop.
  - Open the Finder.
  - Click the Applications folder.
  - Drag the Kompozer icon from the desktop to the Applications folder.
4
Open Kompozer. Use the following steps to open Kompozer on PC or Mac
- Windows:
  - Click the Windows Start menu.
  - Type «Kompozer»
  - Double-click the Kompozer icon.
- Mac:
  - Click the magnifying glass icon in the upper-right corner.
  - Type «Kompozer» in the search bar.
  - Double-click Kompozer.app.
5

Click File. It’s in the menu bar at the top of the app.
6

Click Open File. It’s the second option in the drop-down menu below «File». This open a file browser you can use to select an open HTML file.
7

Click an HTML file and click Open. This opens the HTML file in Kompozer.
8
Click Split. It’s the middle tab at the top of the page. This displays a split screen that contains an HTML editor on the bottom and a preview screen on top.
- You may need to enlarge the app so that you have more room to work.
9
Edit the HTML document. The HTML source code screen is on the bottom, you can use this screen to edit HTML much the same way you would in Notepad or TextEdit. You can also use the preview screen to edit your HTML using the following steps:
- Use the drop-down menu in the upper-right corner to select the text type (i.e Heading, paragraph, ect}
- Click and type to add text.
- Use the buttons in the panel at the top of the screen to add bold, italics, text alignment, indents, or lists to your text.
- Click the colored square in the panel at the top of the screen to change the text color.
- Click the Image icon at the top of the screen to add an image to your HTML document.
- Click the icon that resembles a chainlink to add a link to your HTML document.
10

Click the Save icon. Once you are done making changes to your document, click the Save icon at the top of the screen. It’s below an icon that resembles a floppy disk. This saves your work.

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Thanks for submitting a tip for review!

Remember to save your document while editing. Something could go wrong at any moment.

References

About This Article

Article SummaryX

1. Open Notepad on Windows or TextEdit on Mac.
2. Click File.
3. Click Open.
4. Select «All Files» in the drop-down next to the file name box on Windows.
5. Click and HTML file to select it and click Open.
6. Use the text editor to edit the HTML tags.
7. Click File.
8. Click Save.

Did this summary help you?

Thanks to all authors for creating a page that has been read 118,215 times.

Is this article up to date?

Источник

Download Article

1

Click the Windows Start button

. It’s the button that has a Windows logo in the task bar. By default, it’s in the lower-left corner. This displays the Start menu
2

Type Notepad. This displays Notepad in the Start menu.

Advertisement
3

Click Notepad. It has an icon that resembles a notepad with a blue cover.
4

Click File. It’s at the top of the menu bar in Notepad. This displays a drop-down menu. This displays a file browser you can use to open files in Notepad.
5

Click Open. It’s the second option in the File drop-down menu.
6

Select «All files» in the file type drop-down menu. Click the drop-down that says «Text Documents (.txt)» and select «All files» in the drop-down menu. This displays all document types (including HTML files) in the file browser.
7
Select an HTML file and click Open. This opens the HTML document in Notepad. You can edit the HTML code in Notepad.
- Alternatively, you can create a new HTML document in Notepad.
8
Edit the HTML code. In order to edit HTML in Notepad, you’ll need to learn HTML so that you can edit it by hand. Common elements you can edit include the following.
- <!DOCTYPE html>: This goes at the top of the HTML document. This tells the web browser that this is an HTML document.
- <html></html>: These tags go at the top and bottom of the HTML document. This indicates where the HTML code starts and stops.
- <head></head>: These tags go at the top of the HTML document. They indicate where the head of the HTML document starts and stops. The head of the HTML document contains information that is not seen on the web page. This includes the page title, metadata, and CSS
- <title>Page Title</title>: These tags indicate the title the page. The title goes in the head of the HTML document. Type the title of the page in between these two tags.
- <body></body>: These tags indicate where the body of the HTML document starts and stops. The body is where all the web page content is written. The body comes after the head in the HTML document.
- <h1>Headline Text</h1>: These tags create headline tags. The text in between the «<h1>» and «</h1>» tags appears as a large bold text. Text goes in the body of the HTML document.
- <p>Paragraph Text</p>: These tags are used to create paragraph text in an HTML document. The text that goes in between «<p>» and «</p>» appears as normal sized text. Text goes in the body of the HTML document.
- <b>Bold Text</b>: These tags are used to create bold text. The text that goes in between «<b>» and «</b>» appears as bold text.
- <i>Italic Text</i>: These tags are used to create italic text. The text that goes in between «<i>» and «</i>» appears as itallic text.
- <a href="URL">Link text</a>: This tag is used to link to another website. Copy the web address you want to link to and paste it where it says «URL» (in between the quotation marks). The the text for the link where it says «Link text» (no quotation marks needed).
- <img src="image URL">: This tag is used to post an image using HTML. Replace teh text that says «image URL» with the web address of the image.
9

Click File. It’s in the menu bar at the top of the screen.
10
Click Save As. This opens a dialogue box you can use to save your file.
- To save the file as it’s existing name and file type, just click Save in the drop-down menu below «File».
11

Select «All Files». Use the drop-down menu next to Save as Type» to select «All Files».
12

Type a name for the file. Use the box next to «File Name» to type a name for the file.
13

Type .html at the end of the file. After you type a name for the file in the «File Name» box, add the extension «.html» at the end of the file name. Without this extension, it will save the file as a .txt file, instead of an HTML file.
14

Click Save. This saves the file.

1

Click the magnifying glass icon

. It’s in the upper-right corner of the Mac desktop. This displays a search bar.
2

Type TextEdit in the search bar. This displays a list of apps that match your search result.
3

Click TextEdit.app. It’s at the top of the search results. It’s next to an icon that resembles a sheet of paper and a pen.
4

Click File. It’s at the menu bar at the top of the screen when TextEdit is open.
5

Click Open. This opens a file browser you can use to navigate your Mac and open files.
6

Click an HTML file and click Open. HTML files have an extension that says «.html» after the file name. Use the file browser to navigate to an HTML file and click it to select it. Then click Open to open the HTML file in TextEdit.
7
Edit the HTML code. You can use TextEdit to edit HTML code on make. You need to learn HTML so that you can edit it by hand. Common elements you can edit include the following.
- <!DOCTYPE html>: This goes at the top of the HTML document. This tells the web browser that this is an HTML document.
- <html></html>: These tags go at the top and bottom of the HTML document. This indicates where the HTML code starts and stops.
- <head></head>: These tags go at the top of the HTML document. They indicate where the head of the HTML document starts and stops. The head of the HTML document contains information that is not seen on the web page. This includes the page title, metadata, and CSS
- <title>Page Title</title>: These tags indicate the title the page. The title goes in the head of the HTML document. Type the title of the page in between these two tags.
- <body></body>: These tags indicate where the body of the HTML document starts and stops. The body is where all the web page content is written. The body comes after the head in the HTML document.
- <h1>Headline Text</h1>: These tags create headline tags. The text in between the «<h1>» and «</h1>» tags appears as a large bold text. Text goes in the body of the HTML document.
- <p>Paragraph Text</p>: These tags are used to create paragraph text in an HTML document. The text that goes in between «<p>» and «</p>» appears as normal sized text. Text goes in the body of the HTML document.
- <b>Bold Text</b>: These tags are used to create bold text. The text that goes in between «<b>» and «</b>» appears as bold text.
- <i>Italic Text</i>: These tags are used to create italic text. The text that goes in between «<i>» and «</i>» appears as itallic text.
- <a href="URL">Link text</a>: This tag is used to link to another website. Copy the web address you want to link to and paste it where it says «URL» (in between the quotation marks). The the text for the link where it says «Link text» (no quotation marks needed).
- <img src="image URL">: This tag is used to post an image using HTML. Replace teh text that says «image URL» with the web address of the image.
8

Click File. It’s in the menu bar at the top of the screen.
9
Click Save. It’s in the drop-down menu below «File». This saves the HTML file.
- To change the name of the file, click Rename in the «File» drop-down menu. Type a new name for the file at the top of the screen. Be sure to include the «.html» extension at the top of the page.

1
Open Dreamweaver. Dreamweaver has an icon that resembles a green square that says «Dw» in the middle. Click the icon in the Windows Start menu, or Application folder on Mac to open Dreamweaver.
- Adobe Dreamweaver requires a subscription. You can purchase a subscription starting at $20.99 a month.
2

Click File. It’s in the menu bar at the top fo the screen.
3

Click Open. It’s in the drop-down menu below «File».
4

Select an HTML document and click Open. Use the file browser to select an HTML document on your computer and click it to select it. Then click Open in the lower-right corner.
5

Click Split. It’s the middle tab at the top of the page. This displays a split screen that contains an HTML editor on the bottom and a preview screen on top.^[1]
6
Edit the HTML document. Use the HTML editor to edit HTML. The way you edit HTML in Dreamweaver isn’t too different from editing HTML in Notepad or TextEdit. As you type an HTML tag, a search menu will appear with matching HTML tags. You can click the HTML tag to insert its opening and closing tags. Dreamweaver will check to make sure there are opening and closing tags for all your HTML elements.
- Alternatively, you can click where you want to insert an HTML element in the HTML editor and click Insert in the menu bar at the top of the screen. Click the item you want to insert in the drop-down menu to add the HTML code automatically.
7

Click File. When you are done editing the HTML document, click File in the menu bar at the top of the screen.
8

Click Save. It’s in the drop-down menu below File. This saves your HTML document.

1

Go to https://sourceforge.net/projects/kompozer/ in a web browser. You can use any web browser on PC or Mac. This is the download page for Kompozer. It is a free HTML (WYSIWYG) editor that works on both Windows and Mac.
2

Click Download. It’s the green button near the top of the page. This takes you to a separate download page. After a 5 second delay, your download will begin.
3
Double-Click the Install file. By default, your downloaded files can be found in your «Downloads» folder on PC or Mac. You can also click on them in your web browser to launch the Kompozer installer. Use the following instructions to install Kompozer:
- Windows:
  - If asked if you want to allow the installer to make changes to your system, click Yes.
  - Click Next in the intro windows.
  - Click the radial button next to «I accept the agreement» and click Next.
  - Click Next to use the default install location or click Browse to select a different install location.
  - Click Next and then click Next again
  - Click Install
  - Click Finish
- Mac:
  - Double-click the Kompozer install file.
  - Click KompoZer.app
  - Click the Apple icon in the upper-left corner.
  - Click System Preferences
  - Click Security and Privacy
  - Click the General tab.
  - Click Open Anyway near the bottom of the window.
  - Click Open in the pop-up Window.
  - Drag the Kompozer icon to your desktop.
  - Open the Finder.
  - Click the Applications folder.
  - Drag the Kompozer icon from the desktop to the Applications folder.
4
Open Kompozer. Use the following steps to open Kompozer on PC or Mac
- Windows:
  - Click the Windows Start menu.
  - Type «Kompozer»
  - Double-click the Kompozer icon.
- Mac:
  - Click the magnifying glass icon in the upper-right corner.
  - Type «Kompozer» in the search bar.
  - Double-click Kompozer.app.
5

Click File. It’s in the menu bar at the top of the app.
6

Click Open File. It’s the second option in the drop-down menu below «File». This open a file browser you can use to select an open HTML file.
7

Click an HTML file and click Open. This opens the HTML file in Kompozer.
8
Click Split. It’s the middle tab at the top of the page. This displays a split screen that contains an HTML editor on the bottom and a preview screen on top.
- You may need to enlarge the app so that you have more room to work.
9
Edit the HTML document. The HTML source code screen is on the bottom, you can use this screen to edit HTML much the same way you would in Notepad or TextEdit. You can also use the preview screen to edit your HTML using the following steps:
- Use the drop-down menu in the upper-right corner to select the text type (i.e Heading, paragraph, ect}
- Click and type to add text.
- Use the buttons in the panel at the top of the screen to add bold, italics, text alignment, indents, or lists to your text.
- Click the colored square in the panel at the top of the screen to change the text color.
- Click the Image icon at the top of the screen to add an image to your HTML document.
- Click the icon that resembles a chainlink to add a link to your HTML document.
10

Click the Save icon. Once you are done making changes to your document, click the Save icon at the top of the screen. It’s below an icon that resembles a floppy disk. This saves your work.

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Thanks for submitting a tip for review!

Remember to save your document while editing. Something could go wrong at any moment.

References

About This Article

Article SummaryX

Did this summary help you?

Thanks to all authors for creating a page that has been read 118,215 times.

Is this article up to date?

Источник

HTML (Hypertext Markup Language) – язык гипертекстовой разметки. Именно он предоставляет возможность видеть страницы различных сайтов так, как мы их видим. Все картинки, текст, цвета, ссылки, различные кнопочки описываются языком html. Файлы с расширением html открываются через интернет — браузер, который, в свою очередь, интерпретирует его и выдает страницу. Сам язык представляет собой команды — теги, заключенные в треугольные скобки < >. Если немного отредактировать эти теги в какую-либо сторону, внешний вид страницы сразу же изменится. Для изменения html-файлов существует множество различных редакторов. Одним из самых популярных является «Notepad++» — он позволяет подсвечивать код, визуально отделяя его от содержимого контента. Как же отредактировать html-файл?

Вам понадобится

Персональный компьютер, программы «Notepad++» либо «Блокнот».

Инструкция

Прежде всего, нужно открыть html-файл для редактирования. Для этого щелкните на нём правой кнопкой мыши и выберите пункт «Открыть с помощью». В появившемся списке щелкнете на «Notepad++». Если нужной программы не оказалось в списке, нажмите на «Выбрать программу» и найдите ее.

После выбора в окне программы откроется содержимое html-файла. Как правило, документ в формате html имеет основные теги. И выглядит так:
Тут заголовок страницы
Далее основной контент страницы:

Можно менять содержимое страницы и заголовок. Можно добавить картинку или видео-файл. Можно оформить текст по своему вкусу. Например:
Я умею редактировать html
Мы редактируем html

Внесите изменения в html-файл и обязательно сохраните его.

Запустите двойным кликом мыши или клавишей Enter файл с html. Он должен открыться в браузере, и вы тут же увидите результат работы. Можно менять содержимое html-файла и обновлять страничку клавишей F5 или нажав на соответствующую кнопку браузера.

Полезный совет

Если у вас под рукой не оказалось редактора, и надо срочно подправить код, то можно воспользоваться стандартным «Блокнотом» операционной системы Windows. В нем не так комфортно работать, но для небольших задач он вполне сгодится. Перед тем, как начать редактировать html-файл, рекомендуется ознакомиться с базовыми понятиями: что представляет собой html-язык и какие команды в нем есть.

Войти на сайт

или

Забыли пароль?
Еще не зарегистрированы?

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Источник

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

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

Давайте приступим.

Что такое HTML?

Говоря технически, ответ на этот вопрос «язык гипертекстовой разметки (Hyper Text Markup Language)». Однако, для кастомизации шаблона, нам достаточно знать, что HTML это набор открывающих и закрывающих тегов, к примеру:

Теги обозначаются символами < и > и закрывающий тег всегда имеет /. Между тегами находится наш контент:

1	<h1>John Smith, Front End Developer</h1>

Хотя иногда, мы можем увидеть одиночный элемент, у которого нет закрывающего тега, к примеру:

Разные HTML теги отображают различные типы контента на веб-странице по разному. Пример сверху, <h1></h1> создаст крупный заголовок с содержанием «John Smith, Front End Developer», в то время как пример <img> тега создаст изображение файла «mypic.jgp», которые затем появятся на вашей странице.

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

Установите текстовый редактор

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

Я рекомендую Sublime Text, который вы можете скачать по ссылке: https://www.sublimetext.com/3

Скачайте и посмотрите как выглядит ваш HTML шаблон

Скачайте шаблон, который вы приобрели, для этого туториала мы будем использовать «Clean CV» для демонстрации.

Большинство HTML шаблонов распространяются в качестве ZIP архива — если так, распакуйте его. После чего откройте директорию шаблона и найдите файл под названием «index.html» или «index.htm» .

В примере моего CV шаблона файл «index.html» находится в директории «01 html-website».

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

Установите какие части шаблона вы хотите изменить

Если вы редактируете шаблон в первый раз, пока что не стоит пытаться изменить цвета или структуру. Для этого сначала нужно разобраться, как работает CSS, язык для стилизации страниц. Для начала лучше сфокусировать на одной вещи во время кастомизации шаблона и редактирование HTML будет неплохой отправной точкой.

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

В случае нашего CV шаблона мы хотим изменить:

Имя
Профессию
Фотографию
Ссылки соцсетей
Контактную информацию
Секции CV: «Профиль», «Опыт работы», «Технические навыки» и «Образование»
Копирайт

Теперь когда у нас есть список того, что нам предстоит изменить, мы можем начать поиск соответствующих HTML тегов в нашем коде. Давайте начнём с имени.

Найдите необходимый тег в веб-инспекторе

Нажмите правой кнопкой мыши по имени, по умолчанию «Jhon Smith» и выберите Инспектировать (Inspect):

Панель, которая выглядит следующим образом, откроется в вашем браузере:

Панель инспектора

Данная панель предоставляет вам интерактивный способ изучить код. Наведите мышь на строчку <h1>...</h1> (заголовок первого уровня) и вы должны увидеть выделенное название секции шаблона, как показано на скриншоте.

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

Теперь разверните h1, нажав на маленький треугольник слева и вы увидите контент между тегами, то есть John Smith <small>Front End Developer</small>.

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

Отредактируйте тег в HTML

Пришло время открыть HTML файл и отредактировать его. Откройте «index.html» файл в Sublime Text и вы увидите следующую картину:

Теперь нужно найти код, который соответствует тому, что мы видели в Chrome инспекторе. Опуститесь на строку 61 — 61.

Теперь можно изменить контент между тегов, чтобы поменялось имя и профессия, на ту которую мы хотим. Для начала отредактируйте «Jhon Smith» и добавьте собственное имя:

Теперь между тегами <small></small> измените «Front End Developer» на вашу профессию.

Сохраните файл и обновите страницу в Chrome. Вы должны увидеть соответствующие изменения.

Повторите, чтобы отредактировать другой контент

Теперь вы понимаете основной процесс:

Инспектируем контент, который следует изменить
Находим необходимые теги
Находим эти теги в HTML файле
Редактируем код

Давайте повторим этот процесс, чтобы кастомизировать остальной контент.

Добавляем собственное фото

Дальше мы добавим собственное фото слева от области с именем и профессией. Нажмите правой кнопкой мыши на изображение, чтоб проинспектировать его и найти необходимый тег:

1	<img src="_content/140x140.png" alt="">

Обратите внимание, что в окне инспектора данная строка находится сразу над той строчкой, которую мы редактировали до этого:

Откройте HTML файл и перейдите на строку 59:

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

Найдите фотографию себя, которая вам понравиться, размерами 150px на 150px (не обращайте внимание что в названии файла указано 140×140.png, в действительности размер 150×150).

Поместите изображение в директорию «_content», в директорию где находится файл «index.html».

Теперь, в HTML файле, измените значение атрибута src, замените «140×140.png» на имя файла, который вы только что добавили в «_content» директорию. Убедитесь, что вы правильно указали расширение файла, оно должно соответствовать вашему файлу «png» / «jpg».

Сохраните ваш файл, обновите Chrome и вы должны увидеть новое изображение:

Измените ссылки соцсетей

Давайте изменим ссылки иконок социальных сетей в верхнем правом углу нашего шаблона. Как и прежде нажмите правой кнопкой мыши на одну из иконок, чтобы проинспектировать её. В открывшемся окне, посмотрите на строку, которая подсвечивается, вы должны увидеть там текст «facebook-icon». Мы будем использовать данный текст, чтобы найти соответствующий код в нашем HTML файле.

Вернитесь в Sublime Text, нажмите CTRL + F и найдите «facebook-icon». Нужный нам текст находится на 75 строке.

Тег a на строке 75 не что иное как ссылка для этой иконки и атрибут href, который вы увидите внутри, куда эта ссылка ведёт. Вам следует изменить значение href атрибута на адрес вашей Facebook страницы (к примеру: https://www.facebook.com/mylink)

Замените #, символ, который находится там по умолчанию, на ваш адрес. После чего сделайте тоже самое для Twitter на строке 79, для Google+ на строке 83 и Linkedin на строке 87.

Ели вы хотите убрать какую-нибудь из иконок, выделите открывающий тег <a>, затем содержание ссылки между тегами и закрывающий тег </a> и удалите весь этот код.

Сохраните и обновите ваш сайт, теперь если нажать на ссылку вы перейдёте по соответствующему адресу.

Отредактируйте контактную информацию

Пришло время изменить контактную информацию под иконками соцсетей.

Начните инспектировать слово «Email», чтобы найти где данная информация находится в коде. Обратите внимание на строку, которая подсвечена, нам нужна соответствующая строка в нашем HTML файле.

В Sublime Text, снова нажмите CTRL + F и найдите «Email». Вам необходимо отыскать слово «Email», которое окружено кодом, который мы видели в инспекторе.

Вы найдете интересующее нас место на строке 94. Выделите емейл, который стоит по умолчанию «jhon@sitename.com» в двух местах на этой строке:

После чего замените на свой собственный емейл адрес. На следующей строке замените номер телефона на свой и на строке ниже замените адрес своим адресом:

Отредактируйте секции CV

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

Опуститесь ниже до секции «Professional Profile», нажмите правой кнопкой на параграф с текстом, чтобы инспектировать его.

В инспекторе выделится тег p — данный тег отвечает за создание параграфа с текстом.

Далее мы хотим знать, как вся секция CV с текстом выглядит в коде, не только один параграф. В окне инспектора, нажмите на строку кода сверху от параграфа, который мы недавно инспектировали и вы увидите, как выделиться текст:

Тем самым мы знаем, что каждая секция кода обернута в теги <div class="cv-item">...</div>. div означает division и такие теги служат для структурирования контента на сайте, создания лейаута.

Теперь инспектируйте секцию CV с заголовком — «Professional Profile».

Сначала вы увидите очередной набор тегов div. Всё это потому, что заголовок, который нас интересует вложен в эти теги.

Нажмите треугольник рядом с этим заголовком, чтобы развернуть его и увидеть контент, после чего сделайте тоже самое со следующей строкой, пока вы не увидите текст «Professional Profile». Он находится между <h2>...</h2> тегами, что означает заголовок второго уровня:

Наконец мы знаем, как выглядит код каждой части CV секции, вернёмся к Sublime Text и начнём редактирование.

Поместите курсор в самом верху HTML документа, чтобы начать поиск с этого места. Нажмите CTRL + F, чтобы найти «cv-item». Продолжайте искать пока не найдёте код <div class="cv-item"> сразу после <h2>Professional Profile</h2>.

Замените Professional Profile на текст, который вас устраивает. Оберните каждый параграф с текстом в <p>...</p> теги.

Когда вы закончите, убедитесь что открывающий тег параграфа, последний параграф секции содержит атрибут class со значением last, вот так: <p class="last">.....</p>. Это добавляет стили из таблицы CSS стилей нашего шаблона — пространство между текстом секции.

После того как документ сохранён, обновите страницу, будет видно, что две верхние секции были кастомизированы.

Теперь мы можем перейти к редактированию оставшихся элементов CV секции, таким же образом как мы это сделали с «Professional Profile».

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

Проинспектируйте должность:

Проинспектируйте время работы:

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

Используйте такой же подход, который мы применяли во время редактирования секции «Professional Profile», для редактирования оставшихся CV секций. Чтобы отредактировать должность, время и маркированный список найдите соответствующий код, который мы видели в окне инспектора.

Используйте p теги для создания параграфов и как в случае с «Professional Profile» секцией, если секция заканчивается параграфом <p>, добавьте class="last" то есть <p class="last">...</p>.

Обратите внимание: если вы хотите добавить новые секции CV, или убрать уже существующую, вам нужно найти теги в инспекторе, которые оборачивают всю секцию.

В этом примере вы увидите, что вся секция обернута тегами <div class="cv-item">...</div>.

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

Отредактируйте копирайт

Мы закончили с редактированием CV секций и у нас остался последний пункт нашего списка для редактирования — копирайт в футере. Опять же мы будем использовать знакомый нам процесс. Нажмите правой кнопкой мыши на копирайт, чтобы проинспектировать его:

Найдите соответствующий код в вашем HTML и отредактируйте его добавив текущий год и собственное название:

На этом всё!

Отлично! Мы только что кастомизировали этот HTML шаблон и он отображает ваш контент. Надеюсь теперь вы чувствуете себя более уверенно и у вас не возникнут сложности с кастомизацией в будущем.

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

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

Вам могут помочь ссылки ниже, набор отличных обучающих материалов:

Ваш первый HTML документ за 60 секунд
Выучите HTML и CSS за 30 дней
Лучший способ изучения HTML
Введение в HTML

Источник

Назад
Обзор: Introduction to HTML
Далее

Одна из основных задач HTML — придавать тексту структуру и смысл, семантику, так, чтобы браузер смог отобразить текст корректно. Эта статья покажет, как можно использовать HTML, чтобы упорядочить текст на странице путём добавления заголовков и абзацев, выделения слов, создания списков и многое другое.

Предварительные требования:	Базовое знакомство с HTML , описанное в Начало работы с HTML.
Задача:	Изучить базовые способы разметки текста путём добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты..

Основы: Заголовки и абзацы / параграфы

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

Упорядоченный контент делает чтение более лёгким и приятным.

В HTML каждый абзац заключён в элемент <p>, подобно:

<p>Я параграф, да, это я.</p>

Каждый заголовок заключён в элемент заголовка <h1> (en-US):

<h1>Я заголовок истории.</h1>

Имеется шесть элементов заголовка: <h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US) и <h6> (en-US). Каждый элемент представляет разный уровень контента в документе; <h1> представляет главный заголовок, <h2> представляет подзаголовки, <h3> представляет под-подзаголовки и так далее.

Создание иерархической структуры

Например, в рассказе <h1> будет представлять заглавие рассказа, <h2> обозначит название каждой главы, <h3> будет обозначать подзаголовки в каждой главе и так далее.

<h1> Сокрушительная скука </ h1>

<p> Крис Миллс </ p>

<h2> Глава 1: Тёмная ночь </ h2>

<p> Это была тёмная ночь. Где-то кричала сова. Дождь обрушился на ... </ p>

<h2> Глава 2: Вечное молчание </ h2>

<p> Наш главный герой ничего не мог, когда шёпот из тёмной фигуры ... </ p>

<h3> Призрак говорит </ h3>

<p> Прошло ещё несколько часов, когда внезапно призрак выпрямился и воскликнул: «Пожалуйста, помилуй мою душу!» </ p>

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

Предпочтительнее использовать <h1> только один раз на странице — это заголовок самого верхнего уровня, и все остальные заголовки располагаются ниже его в иерархии.
Убедитесь, что вы используете заголовки в правильном порядке в иерархии. Не используйте <h3> для создания подзаголовков при одновременном использовании <h2> для представления под-подзаголовков — это не имеет смысла и приведёт к странным результатам.
Из шести доступных уровней заголовка вы должны стремиться использовать не более трёх на странице, если только вы не чувствуете, что это необходимо. Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации. В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.

Зачем нам необходима структура?

Чтобы ответить на этот вопрос, давайте посмотрим на text-start.html — отправную точку нашего примера для этой статьи (хороший рецепт хумуса). Вы должны сохранить копию этого файла на своём локальном компьютере, так как вам понадобится это для упражнений позже. Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return для перехода на следующую строку).

Однако, когда вы откроете документ в своём браузере, вы увидите, что текст выглядит как один большой кусок!

Это связано с тем, что нет элементов для создания структуры контента, поэтому браузер не знает, где здесь заголовок и где абзац. Более того:

Пользователи, просматривающие веб-страницу, быстро сканируют её в поиске подходящего контента, часто просто просматривая только заголовки (мы обычно тратим очень мало времени на веб-странице). Если они не смогут увидеть ничего полезного в течение нескольких секунд, они, скорее всего, расстроятся и отправятся куда-нибудь ещё.
Поисковые системы, индексирующие вашу страницу, считают содержание заголовков важными ключевыми словами для влияния на ранжирование поиска страницы. Без заголовков ваша страница будет плохо работать с точки зрения SEO (Search Engine Optimization — поисковая оптимизация).
Сильно слабовидящие люди часто не читают веб-страницы — они слушают их вместо этого. Это делается с помощью программного обеспечения, называемого программой чтения с экрана. Это программное обеспечение предоставляет способы быстрого доступа к данному текстовому контенту. Среди различных используемых методов они предоставляют схему документа, считывая заголовки, позволяя своим пользователям быстро находить нужную им информацию. Если заголовки недоступны, они будут вынуждены слушать весь документ вслух.
Чтобы стилизовать контент с помощью CSS или сделать его интересным с помощью JavaScript, вам нужно, чтобы элементы обёртывали соответствующий контент, чтобы CSS и JavaScript смогли эффективно работать.

Поэтому нужно дать структурную разметку нашему контенту.

Активное изучение: создание структуры для нашего контента

Давайте рассмотрим это на живом примере. В приведённом ниже примере добавьте элементы в исходный текст в поле «Редактируемый код», чтобы он отображался как заголовок и два абзаца в поле «Результат».

Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки Сбросить. Если вы застряли, нажмите кнопку Показать решение, чтобы увидеть ответ.

<h2>Результат</h2>

<div class="output" style="min-height: 50px;">
</div>

<h2>Редактируемый код</h2>
<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">Моя мини-история
Я полицейский, и моё имя Триш.
Мои ноги сделаны из картона, и мой муж — рыба.</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить">
  <input id="solution" type="button" value="Показать решение">
</div>

html {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

.input, .output {
  width: 90%;
  height: 6em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Спрятать решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var htmlSolution = '<h1>Моя мини-история</h1>n<p>Я полицейский, и моё имя Триш.</p>n<p>Мои ноги сделаны из картона, и мой муж — рыба.</p>';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

textarea.onkeyup = function(){
  if(solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Почему мы нуждаемся в семантике?

Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметов; когда мы что-то видим, мы знаем, какова его функция. Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зелёный свет означает «идти». Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)

В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид. В этом контексте элемент <h1> (en-US) также является семантическим элементом, который даёт тексту, который он обёртывает, роль (или значение) «заголовка верхнего уровня на вашей странице».

<h1>Это заголовок верхнего уровня</h1>

По умолчанию браузер придаст ему большой размер шрифта, чтобы он выглядел как заголовок (хотя вы можете стилизовать его как угодно, используя CSS). Что ещё более важно, его семантическое значение будет использоваться несколькими способами, например, поисковыми системами и программами чтения с экрана (как упоминалось выше).

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

<span style="font-size: 32px; margin: 21px 0;">Это заголовок верхнего уровня?</span>

Это элемент <span>. У него нет семантики. Вы используете его, когда хотите применить к контенту CSS (или сделать что-то с ним с помощью JavaScript), не придавая ему никакого дополнительного значения (об этом вы узнаете позже). Мы применили CSS, чтобы он выглядел как заголовок верхнего уровня, но поскольку он не имеет семантического значения, он не получит никаких дополнительных преимуществ, описанных выше. Рекомендуется использовать соответствующий элемент HTML на практике.

Списки

Теперь обратим наше внимание на списки. Списки есть везде вокруг нас — от вашего списка покупок до списка направлений, которым вы подсознательно следуете, чтобы каждый день добраться домой, и списка инструкций, которые вы выполняете в этом руководстве! Списки используются всюду в Интернете, и мы рассмотрим три разных типа списков.

Неупорядоченные

Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмём, к примеру, список покупок:

молоко
яйца
хлеб
хумус

Каждый неупорядоченный список начинается с элемента <ul> (unordered list) — он обёртывает все элементы списка: молоко, яйца, хлеб, хумус.

Последний шаг состоит в том, чтобы обернуть каждый элемент списка в элемент <li> (элемент списка):

<ul>
  <li>молоко</li>
  <li>яйца</li>
  <li>хлеб</li>
  <li>хумус</li>
</ul>

Активное изучение: разметка неупорядоченного списка

Попробуйте отредактировать образец ниже, чтобы создать свой собственный неупорядоченный список HTML.

<h2>Результат</h2>

<div class="output" style="min-height: 50px;">
</div>

<h2>Редактируемый код</h2>
<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">молоко
яйца
хлеб
хумус</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить">
  <input id="solution" type="button" value="Показать решение">
</div>

html {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

.input, .output {
  width: 90%;
  height: 6em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Спрятать решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var htmlSolution = '<ul>n<li>молоко</li>n<li>яйца</li>n<li>хлеб</li>n<li>хумус</li>n</ul>';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

textarea.onkeyup = function(){
  if(solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Упорядоченные

Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмём в качестве примера маршрут следования:

Двигайтесь до конца дороги
Поверните направо
Езжайте прямо через первые два перекрёстка с круговым движением
Поверните налево на третьем перекрёстке
Школа справа от вас, 300 метров вверх по дороге

Структура разметки такая же, как для неупорядоченных списков, за исключением того, что вы должны обернуть элементы списка в элемент <ol> (ordered list), а не <ul>:

<ol>
   <li>Двигайтесь до конца дороги</li>
   <li>Поверните направо</li>
   <li>Езжайте прямо через первые два перекрёстка с круговым движением</li>
   <li>Поверните налево на третьем перекрёстке</li>
   <li>Школа справа от вас, в 300 метрах вверх по дороге</li>
</ol>

Активное изучение: разметка упорядоченного списка

Попробуйте отредактировать образец ниже, чтобы создать свой собственный упорядоченный список HTML.

<h2>Результат</h2>
<div class="output" style="min-height: 50px;">
</div>
<h2>Редактируемый код</h2>
<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%">Двигайтесь до конца дороги
Поверните направо
Езжайте прямо через первые два перекрёстка с круговым движением
Поверните налево на третьем перекрёстке
Школа справа от вас, 300 метров вверх по дороге</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить">
  <input id="solution" type="button" value="Показать решение">
</div>

html {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

.input, .output {
  width: 90%;
  height: 6em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Спрятать решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var htmlSolution = '<ol>n<li>Двигайтесь до конца дороги</li>n<li>Поверните направо</li>n<li>Езжайте прямо через первые два перекрёстка с круговым движением</li>n<li>Поверните налево на третьем перекрёстке</li>n<li>Школа справа от вас, 300 метров вверх по дороге</li>n</ol>';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

textarea.onkeyup = function(){
  if(solution.value === 'Показать решение>') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Активное изучение: разметка собственной страницы рецептов

Итак, в этот момент в статье у вас есть вся необходимая информация, чтобы разметить наш пример страницы рецепта. Вы можете либо сохранить локальную копию исходного файла text-start.html и выполнить в нём работу, либо сделать это в приведённом ниже примере. Делать это локально, вероятно, будет лучше, так как тогда вы сможете сохранить работу, которую вы делаете, тогда как если вы её добавите в редактируемый пример, она будет потеряна при следующем открытии страницы. У обоих способов есть плюсы и минусы.

<h2>Результат</h2>

<div class="output" style="min-height: 50px;">
</div>

<h2>Редактируемый код</h2>
<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%">Рецепт быстрого приготовления хумуса.

  Хумус — быстро, вкусно, — и ничего лишнего. Этот рецепт был составлен из других рецептов, которые мне попадались в течение многих лет.

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

  Ингредиенты

  1 банка (400г) турецкого гороха (или бараньего гороха)
  175г тахини
  6 вяленых томатов
  Половинка красного перца
  Щепотка кайенского перца
  1 зубчик чеснока
  Чуть-чуть оливкового масла

  Рецепт

  Очистите чеснок от кожуры и крупно нарежьте.
  Удалите стебель и семена у перца; крупно нарежьте перец.
  Добавьте все ингредиенты в пищевой комбайн.
  Измельчите все ингредиенты до состояния пасты.
  Если вы хотите "грубый" хумус, измельчайте пару минут.
  Если вам нужен гладкий хумус, измельчайте дольше.

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

  Хранение

  Храните хумус в запечатанном контейнере в холодильнике. Хумус хранится примерно неделю после приготовления. Если он начнёт пениться, выкидывайте его.

  Хумус можно хранить в морозильном отделении 2–3 месяца.</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить">
  <input id="solution" type="button" value="Показать решение">
</div>

html {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

.input, .output {
  width: 90%;
  height: 6em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Спрятать решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var htmlSolution = '<h1>Рецепт быстрого приготовления хумуса.</h1>nn<p>Хумус — быстро, вкусно, — и ничего лишнего. Этот рецепт был составлен из других рецептов, которые мне попадались в течение многих лет.</p>nn<p>Хумус — это вкусная густая паста, широко используемая в Греческих и Ближневосточных блюдах. Очень вкусно есть его с салатами, мясом на гриле и питой.</p>nn<h2>Ингредиенты</h2>nn<ul>n<li>1 банка (400г) турецкого гороха (или бараньего гороха)</li>n<li>175г тахани</li>n<li>6 вяленых томатов</li>n<li>Половинка красного перца</li>n<li>Щепотка кайенского перца</li>n<li>1 зубчик чеснока</li>n<li>Чуть-чуть оливкового масла</li>n</ul>nn<h2>Рецепт</h2>nn<ol>n<li>Очистите чеснок от кожуры и крупно нарежьте.</li>n<li>Удалите стебель и семена у перца; крупно нарежьте.</li>n<li>Добавьте все ингредиенты в пищевой комбайн.</li>n<li>Измельчите все ингредиенты до состояния пасты.</li>n<li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li>n<li>Если вам нужен гладкий хумус, измельчайте дольше.</li>n</ol>nn<p>По вкусу можете добавить в небольших количествах лимон и кориандский перец, лайм и чипотле, хариссу и мяту или шпинат и брынзу. Попробуйте и решите, что подходит вам.</p>nn<h2>Хранение</h2>nn<p>Храните хумус в запечатанном контейнере в холодильнике. Хумус хранится примерно неделю после приготовления. Если он начнёт пениться, выкидывайте его.</p>nn<p>Хумус можно хранить в морозильном отделении 2–3 месяца.</p>';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

textarea.onkeyup = function(){
  if(solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Если вы застряли, вы всегда можете нажать кнопку Показать решение или проверить наш пример text-complete.html в нашем реестре github.

Вложенные списки

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

<ol>
  <li>Очистите чеснок от кожуры и крупно нарежьте.</li>
  <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li>
  <li>Добавьте все ингредиенты в пищевой комбайн.</li>
  <li>Измельчите все ингредиенты до состояния пасты.</li>
  <li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li>
  <li>Если вам нужен гладкий хумус, измельчайте дольше.</li>
</ol>

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

<ol>
  <li>Очистите чеснок от кожуры и крупно нарежьте.</li>
  <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li>
  <li>Добавьте все ингредиенты в пищевой комбайн.</li>
  <li>Измельчите все ингредиенты до состояния пасты.
    <ul>
      <li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li>
      <li>Если вам нужен гладкий хумус, измельчайте дольше.</li>
    </ul>
  </li>
</ol>

Попробуйте вернуться к предыдущему примеру активного обучения и обновить второй список.

Акцент и важность

В обиходе мы часто подчёркиваем определённые слова, чтобы изменить смысл предложения и мы часто хотим отметить некоторые слова как важные или разные в некотором роде. HTML предоставляет различные семантические элементы, позволяющие нам добавлять текстовые материалы с такими эффектами, и в этом разделе мы рассмотрим несколько наиболее распространённых.

Акцент

Когда мы хотим добавить акцент в разговорный язык, мы подчёркиваем определённые слова, тонко изменяя смысл того, что мы говорим. Точно так же на письменном языке мы склонны подчёркивать слова, выделяя их курсивом. Например, следующие два предложения имеют разные значения.

Я рад, что ты не опоздал.

Я рад, что ты не опоздал.

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

В таких случаях в HTML используется элемент <em> (выделение). Кроме того, чтобы сделать документ более интересным для чтения, они распознаются программами, считывающими с экрана, и произносятся другим тоном. Браузеры стилизуют это по умолчанию курсивом, но вы можете не использовать этот тег, чтобы получить курсив. Для выделения курсивом вы можете использовать элемент <span> и CSS, или, возможно, элемент <i> (en-US) (смотрите ниже).

<p>Я <em>рад</em>, что ты не <em>опоздал</em>.</p>

Важное значение

Чтобы подчеркнуть важные слова, мы склонны подчёркивать их в устной речи и выделять жирным на письменном языке. Например:

Эта жидкость очень токсична.

Я рассчитываю на вас. Не опаздывай!

В таких случаях в HTML используется элемент <strong> (важное значение). Помимо того, что документ становится более полезным, они распознаются программами, считывающими с экрана, и говорят другим тоном. Браузеры стилизуют это как полужирный текст по умолчанию, но вы можете не использовать этот тег, чтобы получить жирный шрифт. Для получения жирного шрифта вы можете использовать элемент <span> и CSS, или, возможно, элемент <b> (смотрите ниже).

<p>Эта жидкость <strong>очень токсична</strong>.</p>

<p>Я рассчитываю на тебя. <strong>Не </strong>опаздывай!</p>

При желании вы можете вложить важные и акцентированные слова друг в друга:

<p>Эта жидкость <strong>очень токсична</strong> —
если ты выпьешь её, <strong>то можешь<em>умереть</em></strong>.</p>

Активное изучение: Давайте будем важны!

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

<h2>Результат</h2>

<div class="output" style="min-height: 50px;">
</div>

<h2>Редактируемый код</h2>
<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Важное объявление</h1>
<p>9 января 2010 года, в воскресенье,
банда вандалов была обнаружена за кражей нескольких
садовых гномов из торгового центра в центре Милуоки. На них были
надеты зелёные спортивные костюмы и глупые шляпы, и,
по-видимому, они были в нетрезвом состоянии. Если у кого-то
есть какая-либо информация об этом инциденте, пожалуйста,
позвоните в полицию немедленно.</p></textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Сбросить">
  <input id="solution" type="button" value="Показать решение">
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Спрятать решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var htmlSolution = '<h1>Важное объявление</h1>n<p><strong>9 января 2010 года, в воскресенье</strong>, банда <em>вандалов</em> была обнаружена за кражей <strong><em>нескольких</em> садовых гномов</strong> торговом центре в центре <strong>Милуоки</strong>. На них были надеты <em>зелёные спортивные костюмы</em> и <em>глупые шляпы</em>, и, по-видимому, они были в нетрезвом состоянии. Если у кого-то есть <strong>какая-либо</strong> информация об этом инциденте, пожалуйста, позвоните в полицию <strong>немедленно</strong>.</p>';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Курсив, жирный шрифт, подчеркивание…

Элементы, которые мы обсуждали до сих пор, имеют чёткую привязку к семантике. Ситуация с <b>, <i> (en-US) и <u> несколько сложнее. Они появились в эпоху, когда CSS поддерживался плохо или вообще не поддерживался, чтобы люди могли писать жирный текст, курсив или подчёркнутый текст. Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.

HTML5 переопределил <b>, <i> и <u> с новыми, несколько запутанными, семантическими ролями.

Вот хорошее правило: предпочтительней использовать <b>, <i> или <u> для передачи значения, традиционно передаваемого жирным шрифтом, курсивом или подчёркиванием, при условии, что нет более подходящего элемента. Тем не менее, всегда важно сохранить менталитет доступности. Концепция курсива не очень помогает людям, использующим устройства для чтения с экрана, или людям, использующим систему письма, отличную от латинского алфавита.

<i> (en-US) используется для передачи значения, традиционно передаваемого курсивом: иностранные слова, таксономические обозначения, технические термины, мысли …
<b> используется для передачи значения, традиционно передаваемого жирным шрифтом: ключевые слова, названия продуктов, предложения …
<u> используется для передачи значения, традиционно передаваемого подчёркиванием: имя собственное, орфографическая ошибка …

Примечание: Предупреждение о подчёркивании: люди сильно ассоциируют подчёркивание с гиперссылками. Поэтому в Интернете лучше всего подчеркнуть только ссылки. Используйте элемент <u>, когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчёркивания по умолчанию для чего-то более подходящего в Интернете. Пример ниже иллюстрирует, как это можно сделать.

<!-- Научные наименования -->
<p>
  Колибри обыкновенный (<i>архилоус обыкновенный</i>) —
наиболее часто встречающийся вид колибри в северо-восточной Америке.
</p>

<!-- Иностранные слова -->
<p>
  Случился прилив иностранных слов, таких как <i lang="uk-latn">vatrushka</i>,
  <i lang="id">nasi goreng</i> и <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- Явно неправильное произношение или написание -->
<p>
  Когда-нибудь я узнаю, как <u>гаварить</u> без ошибок.
</p>

<!-- Выделение ключевых слов в инструкциях -->
<ol>
  <li>
    <b>Отрежьте</b> два ломтика хлеба.
  </li>
  <li>
    <b>Добавьте</b> кусочек помидора и лист латука между ломтями хлеба.
  </li>
</ol>

Заключение

Вот и всё! Эта статья должна была дать вам хорошее представление о том, как начать разметку текста в HTML, и познакомить вас с некоторыми из наиболее важных элементов в этой области. В этой области есть намного больше семантических элементов, и мы рассмотрим их в нашей статье «Больше семантических элементов» позже в курсе. В следующей статье мы подробно рассмотрим, как создавать гиперссылки, возможно, самый важный элемент в Интернете.

Назад
Обзор: Introduction to HTML
Далее

В этом модуле

Источник

References

About This Article

Is this article up to date?

References

About This Article

Is this article up to date?

Что такое HTML?

Установите текстовый редактор

Скачайте и посмотрите как выглядит ваш HTML шаблон

Установите какие части шаблона вы хотите изменить

Найдите необходимый тег в веб-инспекторе

Отредактируйте тег в HTML

Повторите, чтобы отредактировать другой контент

Добавляем собственное фото

Измените ссылки соцсетей

Отредактируйте контактную информацию

Отредактируйте секции CV

Отредактируйте копирайт

На этом всё!

Основы: Заголовки и абзацы / параграфы

Создание иерархической структуры

Зачем нам необходима структура?

Активное изучение: создание структуры для нашего контента

Почему мы нуждаемся в семантике?

Списки

Неупорядоченные

Активное изучение: разметка неупорядоченного списка

Упорядоченные

Активное изучение: разметка упорядоченного списка

Активное изучение: разметка собственной страницы рецептов

Вложенные списки

Акцент и важность

Акцент

Важное значение

Активное изучение: Давайте будем важны!

Курсив, жирный шрифт, подчеркивание…

Заключение

В этом модуле

Читайте также: