Как вставить текст в html файл
Обновлено: 04.07.2024
Вид текста на экране зависит только от тегов, он не зависит от пробелов и разбивки на строки.
Все элементы оформления HTML-документов разделяются на два типа: строчные и блочные.
Строчные элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на web-странице и всегда начинаются с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и строчные элементы. По вполне понятным причинам строчные элементы не могут включать в себя блочные элементы.
Объединение элементов web-страницы в блоки позволяет применять к ним единое оформление, осуществлять верстку. Достаточно будет изменить расположение блока, изменив один объединяющий тег. Естественно, это удобнее, чем менять расположение каждого элемента web-страницы по отдельности.
Строчные элементы обрамляются тегами <span>. </span>.
Для обрамления элементов блочного типа используется пара <div>. </div>.
Браузеры обрамляют div-блоки разрывами строки.
Блок <div> не может располагаться внутри блока <span>.
Пример
Основные теги форматирования текста
| <p>. </p> | Абзац. |
| <h1>. </h1> | Заголовок первого уровня. |
| <h2>. </h2> | Заголовок второго уровня. |
| . | |
| <h6>. </h6> | Заголовок шестого уровня. |
| <br> | Переход на новую строку. |
| <q>. </q> | Браузер автоматически берет текст в кавычки. Изменить вид кавычек можно стилевым свойством quotes. |
| <hr> | Горизонтальная разделительная линия. |
| <pre>. </pre> | Текст фиксированной ширины с сохранением всех пробелов и переносов. |
Пример
Создайте текстовый файл, как в примере. Сохраните его с расширением html.
Двойной щелчок по его наименованию в папке запустит браузер, установленный по умолчанию, и в него уже будет загружен ваш html-документ.
Для создания и редактирования html-страниц подойдёт даже Блокнот. Но я рекомендую использовать Notepad++ или PhpStorm.Выделение в тексте
| <b>. </b> | Полужирный шрифт. |
| <i>. </i> | Курсив. |
| <ins>. </ins> | Подчеркнутый текст. |
| <del>. </del> | Перечеркнутый текст. |
| <sup>. </sup> | Надстрочный текст. |
| <sub>. </sub> | Подстрочный текст. |
Пример
Текст может быть полужирным. Текст может быть курсивом.
Текст можно зачеркнуть.
Текст может быть надстрочным . Текст может быть подстрочным.
В этом уроке мы узнаем, как использовать HTML для добавления на веб-страницы текста и заголовков. Познакомимся поподробнее с абзацем, потом выясним с помощью каких тегов можно визуально выделять текст. Узнаем о существовании специальных символов и способах их отображения. Далее посвятим время способам написания математических формул. Поговорим немного о применении разных языков на одной станице. И под конец займемся изучением тегов для включения метаданных и еще раз повторим все упомянутые теги. Настоятельно рекомендую для правильного усвоения материала сразу же пробовать все на практике, как описано в уроке.
Этот новый тег дает указание браузеру начать отображение набранного за ним текста со следующей строки, не добавляя при этом никаких пустых строк. Браузер распределил текст по строкам и абзацам в соответствии с расставленными в документе HTML тегами.
Визуальное выделение текста
Вы уже знаете, как добавлять текст на веб-страницу, и далее речь пойдет о том, как применить к нему форматирование. Во многих случаях возникает необходимость визуального выделения отдельных текстовых фрагментов с целью привлечь к ним внимание зрителей. HTML позволяет быстро применить к требуемым символам некоторые стандартные типы форматирования, такие, как полужирное начертание или курсив, используя для этого предустановленные наборы тегов. Все эти теги применяются парами (открывающий и закрывающий тег соответственно), заключая в себя текст, подлежащий форматированию. Наберите в своем текстовом редакторе приведенные далее коды, чтобы увидеть, какой результат оказывает применение тех или иных тегов.
В HTML предусмотрены и другие теги, предназначенные для форматирования текста, однако их применение делает коды HTML-документов трудными для чтения и восприятия, и в языке XHTML их заменили таблицы стилей. По определению консорциума W3C коды HTML должны использоваться для обозначения типа информации (текст, заголовки, таблицы и т.п.), но не для ее форматирования.
Разработчики веб-страниц используют таблицы стилей (называемые также стилевыми таблицами) для определения инструкций, задающих правила форматирования для отдельного документа или группы документов. В частности, таблицы стилей применяются теперь вместо некоторых старых тегов HTML, которые ранее использовались для форматирования текста.
Обратите внимание, что для заголовка HTML четвертого уровня задан тот же размер шрифта, что и для обычного текста веб-страницы, тогда как заголовки пятого и шестого уровней набраны шрифтом еще меньшего размера.
На практике выглядит так:.
Если необходимо воспроизвести на веб-странице более сложные выражения, вам придется проявить некоторую изобретательность. Наиболее очевидное решение состоит в записи требуемых выражений в специально предназначенной для таких целей программе с последующим преобразованием этих записей в графическое изображение. Далее полученное изображение можно вставить в страницу HTML. Такой метод работает, однако получаемый результат нельзя назвать оптимальным. Поскольку запись представлена в графическом виде, браузер не сможет распознавать ее текстовые элементы и учитывать их в процессе индексирования или поиска информации.
Выбор языка
Не обязательно знать английский язык, чтобы использовать HTML для создания HTML-страниц. Адреса URL, гиперссылки, теги HTML и элементы форматирования документов не принадлежат к какому-либо языку (с лингвистической точки зрения), чего, разумеется, нельзя сказать о размещаемой на веб-странице текстовой информации. Если вы пишете на стандартном английском языке, никаким специальным образом обозначать этот факт в HTML-документе не требуется. Однако, если вы набираете текст на каком-либо другом языке, необходимо указать этот язык для браузера. В приведенных ниже примерах показано, как в HTML объявляется об использовании русского и французского языков.
Почему так важно обозначать язык? Если не воспользоваться атрибутом lang, браузер не сможет определить, на каком именно языке набрана текстовая информация. Некоторые поисковые машины используют значение атрибута lang для поиска и отбора только тех страниц, которые написаны на каком-то заданном языке. Речевые синтезаторы учитывают эту информацию для корректного воспроизведения текста. Даже некоторые утилиты проверки орфографии, получив сведения о языке написания текста, могут выполнять поиск имеющихся в нем ошибок.
Keywords (Ключевые слова) Ключевыми называются слова, по которым, вероятнее всего, может осуществляться поиск вашей веб-страницы, или синонимы слов, встречаемых в документе.
Description (Описание) Обычно этот тег применяется для добавления краткого описания веб-страницы (не более одного абзаца). Некоторые поисковые машины извлекают заданную в этом теге информацию и подают ее как сведения о найденной странице, однако другие браузеры для этих же целей просто извлекают несколько первых строк HTML-документа.
Author (Автор) Тот, кто осуществляет поиск информации по вашему имени, найдет созданную вами веб-страницу, если вы укажете свое имя, воспользовавшись этим тегом.
Поскольку не все браузеры поддерживают данную возможность, вам, как разработчику веб-страницы, следует добавить на страницу-заставку какой-либо текстовый или графический элемент, позволяющий посетителю самостоятельно выполнить переход к следующей странице.
Если указать браузеру URL-адрес такой веб-страницы, он вначале просмотрит свои файлы журналов, чтобы определить, не сохранена ли в них копия данной страницы. Если да, он обработает заданную в метаданных информацию, чтобы проверить, по-прежнему ли данная копия является актуальной. Если указанная дата истечения срока уже прошла, браузер, прежде чем отобразить на экране эту веб-страницу, обратится за ее более свежей версией.
Теги HTML, рассмотренные в этом уроке
Узнайте, как добавлять и форматировать текст в режиме интерактивного просмотра, в представлении кода или путем извлечения текста и связанных свойств из файлов PSD.
Чтобы добавить текст в документ Dreamweaver, можно ввести его непосредственно в области «Окно документа» или вырезать и вставить. Можно также импортировать текст из других документов.
Вставить текст в документ Dreamweaver можно одной из двух команд — «Вставить» или «Специальная вставка». Команда «Специальная вставка» позволяет указать формат вставляемого текста различными способами. Например, если требуется вставить в документ Dreamweaver текст из форматированного документа Microsoft Word, но все форматирование необходимо убрать для применения к вставленному тексту собственного CSS-стиля, то можно выделить текст в Word, скопировать его в буфер обмена и воспользоваться командой «Специальная вставка» для выбора варианта вставки только текста.
При вставке текста из других приложений с помощью команды «Вставить» можно задать установки вставки, которые будут использоваться по умолчанию.
С помощью сочетаний клавиш Ctrl+V (Windows) или Cmd+V (Macintosh) в представлении «Код» всегда вставляется только текст (без форматирования).
Чтобы добавить текст в документ, выполните одно из следующих действий:- Извлекайте текст из композиций PSD с помощью панели Extract. Подробные сведения см. в разделе Копирование текста из файлов PSD.
- Вводите текст непосредственно в окне документа.
- Скопируйте текст из другого приложения, перейдите в Dreamweaver, расположите курсор в представлении «Дизайн» области «Окно документа» и выберите меню «Правка» > «Вставить» или «Правка» > «Специальная вставка».
При выборе команды «Правка» > «Специальная вставка» доступны несколько вариантов форматирования.
Текст можно также вставить с помощью следующих сочетаний клавиш.
Ctrl + V (Windows)
Cmd + V (Macintosh)
Ctrl + Shift + V (Windows)
Cmd + Shift + V (Macintosh)
К сожалению, многие старые браузеры должным образом не отображают значительную часть именованных сущностей.
Если Вам нужно просто вставить в страницу целиком содержимое всего txt файла, напишите, как подсказал kein:
Если в txt файле несколько страниц и Вам нужно вывести одну случайную - замечательное решение предложил Вам fantasy4fun.
А вот если выводимая информация должна меняться в ответ на какие-либо действия пользователя - то тогда уже добро пожаловать в Аякс. Подробнее - по запросу. И так пост здоровенный получился.
Удачи!
weabdizain
New Member
Можно сделать проще:
Для документа HTML сделать так:
Dador
Member
nataly
Member
Спасибо, но к сожалению видимо по незнанию я не смогла применить PHP скрипт. А вот как это можно сделать с помщью скриптов JS? Мне кажется нужно смотреть выше и решать проблему глобальнее. Зачем обязательно тхт?Это во первых, а во вторых, если используется php то можно написать echo file_get_contents('myfile.txt');
Если нет то думаю придется использовать JS и подгружать все через скрипты, к сожалению не могу посоветовать другого варианта кроме как jQuery ajax. Но мне кажется это самый простой выход
Отличный скрипт, спасибо, однако я вставила его в свой HTML, выложила на сервер и в
результате - ничего (видимо я плохо знаю РНР) Даже не знаю, на что еще можно подумать.
Если Вам нужно просто вставить в страницу целиком содержимое всего txt файла, напишите, как подсказал kein:
Если в txt файле несколько страниц и Вам нужно вывести одну случайную - замечательное решение предложил Вам fantasy4fun.
А вот если выводимая информация должна меняться в ответ на какие-либо действия пользователя - то тогда уже добро пожаловать в Аякс. Подробнее - по запросу. И так пост здоровенный получился.
Удачи!
tigra60
Спасатель
Может быть у Вас хостинг без РНР? Выложите, пожалуйста ссылки на Вашего хостера (и какой у Вас тарифный план) и на Ваш сайт. Или сами проверьте поддержку РНР следующим образом:1. Создаете в текстовом редакторе файл test.php:
2. Помещаете этот файл в корневую папку Вашего сайта.
3. В адресной строке обозревателя набираете:
Частный случай
tigra60
Спасатель
Итоги двухчасовой борьбы с великим творением дядюшки Билла (оно таки меня победило. ):Тут, собственно, все просто:
После загрузки страницы (body onload) вызывается функция getFile(name), где name - имя файла, который появится в блоке mytext.
Эта функция создает объект для запроса к серверу (посредством функции createRequest()), получает наш текстовый файл и запихивает его в блок с /> Проверено на Денвере: ИЕ, Опера, ФФ, Хром.
Теперь по поводу закомментированой строки, указывающей тип файла.
IE с этой строкой ВООБЩЕ работать не хочет.
Для остальных - если файл просто открыть в браузере, без этой строки вылезают кракозябрики.
В общем, попробуйте залить на сайт этот файл и text.txt с любым текстом - проверьте будет ли работать.
Код, который написал уважаемый kein отлично работает, НО ПРИ ОДНОМ УСЛОВИИ:
все файлы должны иметь кодировку UTF-8. Возможно (даже скорее всего!), jQuery имеет средства для перекодировки, но я еще пока о них не знаю, может кто подскажет. Тогда главный файл может быть в любимой cp-1251, а текстовый все равно нужно будет делать в UTF-8.
Удачи!
Читайте также: