How to keep HTML lines under 80 characters? - html

I've been told to keep HTML lines under 80 characters. I'm using Atom, and there is displayed a line to remind it.
I've found a lot of discussions about it but no example at all. For example, I have this line:
<p>
Born and raised in Valencia (Spain), graduated and married in Seville (Spain) and now I'm working and growing my own very family in Vienna (Austria).
</p>
and if I split it I get this:
<p>
Born and raised in Valencia (Spain), graduated and married in Seville (Spa
in) and now I'm working and growing my own very family in Vienna (Austria)
.
</p>
But when I look it on the browser there's a space between some words:
Born and raised in Valencia (Spain), graduated and married in Seville
(Spa_in) and now I'm working and growing my own very family in Vienna (Austria)_.
(I typed underscores to point the generated spaces)
How can I avoid this? And when it comes to code: How to split tags, attributes, links, etc.? For example:
<link rel="apple-touch-icon image_src" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a">
or this
<meta name="twitter:title" property="og:title" itemprop="title name" content="Ask a Question" />
Does anyone know any resource to consult?
By the way, for the moment I'm just coding in HTML and not using JS at all, and I need to keep it like this if it's possible.

Split it close to 80 symbols.
<p>
Born and raised in Valencia (Spain),
graduated and married in Seville
(Spain) and now I'm working and
growing my own very family
in Vienna (Austria).
</p>
For tag splitting - split on every attribute:
<link
rel="apple-touch-icon image_src"
href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a"
>
Please note that it's sometimes better to exceed line limit to increase readability.

Just do it this way; you said under 80 so you don't need always 80.
<p>
Born and raised in Valencia (Spain), graduated and married in Seville
(Spain) and now I'm working and growing my own very family in Vienna
(Austria).
</p>
Other example with multiline property (you have to use tabs not spaced for the URL to work), but I recommend not to use this (like Justinas already mentioned in the comments), because it can lead to problems, sometimes it's better to adopt the rules:
<img src="https://cdn.sstatic.net/Sites/stackoverflow/
img/apple-touch-icon.png?v=c78bd457575a">

Related

How to add a text in every line with an existing texts using regex in Notepad++?

Is it possible to add a text or HTML tags after each line with an existing text in Notepad++?
For example, this text:
<p class="text-center mb-0 cfont"><a class="cfont" href="#tag">[COMPANY]</a></p>
Alexander Hamilton (Alexander Hamilton)
We are waiting in the wings for you (waiting in the wings for you)
You could never back down
You never learned to take your time!
Oh, Alexander Hamilton (Alexander Hamilton)
When America sings for you
Will they know what you overcame?
Will they know you rewrote the game?
The world will never be the same, oh
<p class="text-center mb-0 cfont"><a class="cfont" href="#tag">[BURR, MEN, & COMPANY]</a></p>
The ship is in the harbor now
See if you can spot him
Just you wait
Another immigrant
Comin’ up from the bottom
Just you wait
His enemies destroyed his rep
America forgot him
The goal is to make the text above be like this: (adding the break tags)
<p class="text-center mb-0 cfont"><a class="cfont" href="#tag">[COMPANY]</a></p>
Alexander Hamilton (Alexander Hamilton)</br>
We are waiting in the wings for you (waiting in the wings for you)</br>
You could never back down</br>
You never learned to take your time!</br>
Oh, Alexander Hamilton (Alexander Hamilton)</br>
When America sings for you</br>
Will they know what you overcame?</br>
Will they know you rewrote the game?</br>
The world will never be the same, oh</br>
<p class="text-center mb-0 cfont"><a class="cfont" href="#tag">[BURR, MEN, & COMPANY]</a></p>
The ship is in the harbor now</br>
See if you can spot him</br>
Just you wait</br>
Another immigrant</br>
Comin’ up from the bottom</br>
Just you wait</br>
His enemies destroyed his rep</br>
America forgot him</br>
I was using <pre></pre> earlier, but noticed a horizontal scroll has appeared after text wrapping and cannot make it disappear, therefore, I'm discarding it and will opt to use <br> tags.
The problem I have is there's no "common denominator" for each line that I can use to add the <br> tags. Therefore, I'm hoping there could be a regex trick to do this, like detecting an empty space after each line?
It doesn't have to be done in one go, I'm just hoping there is a quicker way to this.
A side question: Is there a a way to add an id or class to each line of these plain texts without adding <a> or <p> tags?
Lots of thanks in advance!
Use
$(?<=.)(?<!>)
Replace with <br/>.
See proof. $(?<=.)(?<!>) will match any end-of-line position that has a character other than line break characters before it and no > character afer.

First Apache Server, Webpage Images Missing

I just built my first AWS Apache Server and uploaded my website from my school project. The site works in Dreamweaver. However on my Apache server only some of the images appear. They all have the same path and are contained in the same folder /var/www/html/images. Some appear as intended, others are a broken link. Any ideas why it's not working? To get css to load I had to move my css folder. With the images some work fine while others do not. They are roughly the same size files. This is the code for one of the non working images:
<img src="../images/heart_stone2.JPG" alt="Desert Jasper" class="list_photo">
Here is the whole page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/styles.css">
<!-- favicon code -->
<link rel="apple-touch-icon" sizes="180x180" href="../images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../images/favicon-16x16.png">
<link rel="manifest" href="../images/site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<title>Rock list</title>
</head>
<body>
<h1>List of Rocks and Minerals</h1>
<figure>
<figcaption>Description of Jasper</figcaption>
<div class="bottom_mar"><img src="../images/heart_stone2.JPG" alt="Desert Jasper" class="list_photo"><p>Jasper is an opaque rock of virtually any color stemming from the mineral content of the original sediments or ash. Patterns arise during the consolidation process forming flow and depositional patterns in the original silica rich sediment or volcanic ash. Hydrothermal circulation is generally thought to be required in the formation of jasper.</p><p> Jasper can be modified by the diffusion of minerals along discontinuities providing the appearance of vegetative growth, i.e., dendritic. The original materials are often fractured and/or distorted, after deposition, into diverse patterns, which are later filled in with other colorful minerals. Weathering, with time, will create intensely colored superficial rinds.</p><p> The classification and naming of jasper varieties presents a challenge. Terms attributed to various well-defined materials includes the geographic locality where it is found, sometimes quite restricted such as "Bruneau" (a canyon) and "Lahontan" (a lake), rivers and even individual mountains; many are fanciful, such as "forest fire" or "rainbow", while others are descriptive, such as "autumn" or "porcelain". A few are designated by the place of origin such as a brown Egyptian or red African.</p></div>
<div class="clear"></div>
<figcaption>Description of Amethyst</figcaption>
<div class="bottom_mar"><img src="../images/amethyst2.jpg" alt="Uruguayan Amethyst" class="list_photo"><p>Amethyst was used as a gemstone by the ancient Egyptians and was largely employed in antiquity for intaglio engraved gems.</p><p>The Greeks believed amethyst gems could prevent intoxication, while medieval European soldiers wore amethyst amulets as protection in battle in the belief that amethysts heal people and keep them cool-headed. Beads of amethyst were found in Anglo-Saxon graves in England. Anglican bishops wear an episcopal ring often set with an amethyst, an allusion to the description of the Apostles as "not drunk" at Pentecost in Acts 2:15.</p><p>A large geode, or "amethyst-grotto", from near Santa Cruz in southern Brazil was presented at a 1902 exhibition in Düsseldorf, Germany.</p><p>In the 19th century, the color of amethyst was attributed to the presence of manganese. However, since it can be greatly altered and even discharged by heat, the color was believed by some authorities to be from an organic source. Ferric thiocyanate has been suggested, and sulfur was said to have been detected in the mineral.</p></div>
<div class="clear"></div>
<figcaption>Description of Siva Lingams</figcaption>
<div class="bottom_mar"><img src="../images/siva_lingams2.jpg" alt="Siva Lingams" class="list_photo"><p>All traditional lingams come from only one place in the entire world, the Narmada River in India, at Onkar, Mandhata, which is one of the country’s seven sacred holy sites. In this sacred place, lingams wash up on the banks of the river or are carefully brought up from the riverbed.</p><p>India has a long, dry period, and it is at this time, when the river is at its lowest, that the nearby residents go out to the banks of the Narmada and gently pull the stones from their resting places. The lingams are then polished by hand, using methods in accordance with Vedic tradition. Many believe that the lingams are already sacred when they are pulled from the river, but also that the energy given to each lingam during polishing makes it extra special.</p></div>
<div class="clear"></div>
<figcaption>Description of Desert Rose</figcaption>
<div class="bottom_mar"><img src="../images/desert_roses2.jpg" alt="Desert Roses" class="list_photo"><p>Desert rose is the colloquial name given to rose-like formations of crystal clusters of gypsum or baryte which include abundant sand grains. The 'petals' are crystals flattened on the c crystallographic axis, fanning open in radiating flattened crystal clusters.</p><p>The rosette crystal habit tends to occur when the crystals form in arid sandy conditions, such as the evaporation of a shallow salt basin. The crystals form a circular array of flat plates, giving the rock a shape similar to a rose blossom. Gypsum roses usually have better defined, sharper edges than baryte roses. Celestine and other bladed evaporite minerals may also form rosette clusters. They can appear either as a single rose-like bloom or as clusters of blooms, with most sizes ranging from pea sized to 4 inches (10 cm) in diameter.</p><p>The ambient sand that is incorporated into the crystal structure, or otherwise encrusts the crystals, varies with the local environment. If iron oxides are present, the rosettes take on a rusty tone.</p><p>The desert rose may also be known by the names: sand rose, rose rock, selenite rose, gypsum rose and baryte (barite) rose.</p><p>Rose rocks are found in Tunisia, Libya, Morocco, Algeria, Jordan, Saudi Arabia, Qatar, Egypt, the United Arab Emirates, Spain (Fuerteventura, Canary Islands; Canet de Mar, Catalonia; La Almarcha, Cuenca), Mongolia (Gobi), Germany (Rockenberg), the United States (central Oklahoma; Cochise County, Arizona; Texas), Mexico (Ciudad Juárez, Chihuahua), Australia, South Africa and Namibia.</p></div>
<div class="clear"></div>
<figcaption>Description of Aragonite</figcaption>
<div class="bottom_mar"><img src="../images/aragonite2.jpg" alt="Aragonite" class="list_photo"><p>The type location for aragonite is Molina de Aragón in the Province of Guadalajara in Castilla-La Mancha, Spain, for which it was named in 1797. The mineral is not (as often assumed) named for the region of Aragon: Molina de Aragón is located in the historic region of Castile, albeit only 25 kilometers away from the border with Aragon. Aragonite is found in this locality as cyclic twins inside gypsum and marls of the Keuper facies of Triassic.[4] This type of aragonite deposits are very common in Spain, and there are also some in France and Morocco.</p><p>An aragonite cave, the Ochtinská Aragonite Cave, is situated in Slovakia. In the US, aragonite in the form of stalactites and "cave flowers" (anthodite) is known from Carlsbad Caverns and other caves. Massive deposits of oolitic aragonite sand are found on the seabed in the Bahamas.</p><p>Aragonite is the high pressure polymorph of calcium carbonate. As such, it occurs in high pressure metamorphic rocks such as those formed at subduction zones.</p></div>
<div class="clear"></div>
<figcaption>Description of Apophyllite</figcaption>
<div class="bottom_mar"><img src="../images/aphopholite2.jpg" alt="Aphopholite" class="list_photo"><p>The name apophyllite refers to a specific group of phyllosilicates, a class of minerals. Originally, the group name referred to a specific mineral, but was redefined in 1978 to stand for a class of minerals of similar chemical makeup that comprise a solid solution series, and includes the members fluorapophyllite-(K), fluorapophyllite-(Na), hydroxyapophyllite-(K). The name apophyllite is derived from the Greek ἀποφυλλίζω apophylliso, meaning "it flakes off", a reference to this class's tendency to flake apart when heated, due to water loss. These minerals are typically found as secondary minerals in vesicles in basalt or other volcanic rocks. A recent change (2008) in the nomenclature system used for this group was approved by the International Mineralogical Association, removing the prefixes from the species names and using suffixes to designate the species. A subsequent nomenclature change approved by the International Mineralogical Association in 2013 renamed the minerals to include both suffixes and prefixes, as shown above.</p><p>Though relatively unfamiliar to the general public, apophyllites are fairly prevalent around the world, with specimens coming from some of the world's most well-known mineral localities. These localities include: Jalgaon, India; the Harz Mountains of Germany, Mont Saint-Hilaire in Canada, and Kongsberg, Norway, with other locations in Scotland, Ireland, Brazil, Japan, and throughout the United States.</p></div>
<div class="clear"></div>
<figcaption>Description of Calcite</figcaption>
<div class="bottom_mar"><img src="../images/calcite2.jpg" alt="Orange Banded Calcite" class="list_photo"><p>Ancient Egyptians carved many items out of calcite, relating it to their goddess Bast, whose name contributed to the term alabaster because of the close association. Many other cultures have used the material for similar carved objects and applications.</p><p>High-grade optical calcite was used in World War II for gun sights, specifically in bomb sights and anti-aircraft weaponry.[13] Also, experiments have been conducted to use calcite for a cloak of invisibility.</p><p>Calcite is a common constituent of sedimentary rocks, limestone in particular, much of which is formed from the shells of dead marine organisms. Approximately 10% of sedimentary rock is limestone. It is the primary mineral in metamorphic marble. It also occurs in deposits from hot springs as a vein mineral; in caverns as stalactites and stalagmites; and in volcanic or mantle-derived rocks such as carbonatites, kimberlites, or rarely in peridotites.</p><p>Calcite is often the primary constituent of the shells of marine organisms, e.g., plankton (such as coccoliths and planktic foraminifera), the hard parts of red algae, some sponges, brachiopods, echinoderms, some serpulids, most bryozoa, and parts of the shells of some bivalves (such as oysters and rudists). Calcite is found in spectacular form in the Snowy River Cave of New Mexico as mentioned above, where microorganisms are credited with natural formations. Trilobites, which became extinct a quarter billion years ago, had unique compound eyes that used clear calcite crystals to form the lenses.</p><p>The largest documented single crystal of calcite originated from Iceland, measured 7×7×2 m and 6×6×3 m and weighed about 250 tons.</p></div>
<div class="clear"></div>
<figcaption>Description of Spirit Quartz</figcaption>
<div class="bottom_mar"><img src="../images/spirit_quartz2.jpg" alt="Spirit Quartz" class="list_photo"><p>Spirit Quartz is an unusual member of the Quartz family - a community within a stone. Its core, a larger, candle-shaped crystal with a faceted termination point, is encrusted with hundreds of smaller crystal termination points. Also referred to as Cactus Quartz or Porcupine Quartz, it is found only in the Magaliesberg Mountain region of South Africa, first appearing around 2001. Most Spirit Quartz is Amethyst, though Citrine, Smokey, and White Quartz are also mined.</p><p>The word "quartz" is derived from the German word "Quarz", which had the same form in the first half of the 14th century in Middle High German in East Central German[8] and which came from the Polish dialect term kwardy, which corresponds to the Czech term tvrdý ("hard").</p><p>The Ancient Greeks referred to quartz as κρύσταλλος (krustallos) derived from the Ancient Greek κρύος (kruos) meaning "icy cold", because some philosophers (including Theophrastus) apparently believed the mineral to be a form of supercooled ice.[10] Today, the term rock crystal is sometimes used as an alternative name for the purest form of quartz.</p></div>
<div class="clear"></div>
<figcaption>Description of Moldavite</figcaption>
<div class="bottom_mar"><img src="../images/moldavite2.jpg" alt="Moldavite" class="list_photo"><p>Moldavite is a forest green, olive green or blue greenish vitreous silica projectile rock formed by a meteorite impact probably in southern Germany (Nördlinger Ries Crater)[3] that occurred about 15 million years ago. It is a type of tektite.</p><p>Moldavite was introduced to the scientific public for the first time in 1786 as "chrysolites" from Týn nad Vltavou in a lecture by Josef Mayer of Prague University, read at a meeting of the Bohemian Scientific Society (Mayer 1788). Zippe (1836) first used the term "Moldavite", derived from the Moldau (Vltava) river in Bohemia (the Czech Republic), from where the first described pieces came.</p><p>In 1900, F. E. Suess pointed out that the gravel-size moldavites exhibited curious pittings and wrinkles on the surface, which could not be due to the action of water, but resembled the characteristic markings on many meteorites. He attributed the material to a cosmic origin and regarded moldavites as a special type of meteorite for which he proposed the name of tektite. Because of their difficult fusibility, extremely low water content, and chemical composition, the current consensus among earth scientists is that moldavites were formed about 14.7 million years ago during the impact of a giant meteorite in the present-day Nördlinger Ries crater. Splatters of material that was melted by the impact cooled while they were actually airborne and most fell in Bohemia. Currently, moldavites have been found in an area that includes southern Bohemia, western Moravia, the Cheb Basin (northwest Bohemia), Lusatia (Germany), and Waldviertel (Austria). Isotope analysis of samples of moldavites have shown a beryllium-10 isotope composition similar to the composition of Australasian tektites (australites) and Ivory Coast tektites (ivorites).</p></div>
</figure>
<!-- links to local webpages -->
<nav>
<ul>
<li>Home Page</li>
<li>Rock List</li>
<li>Rock Images</li>
<li>Comments</li>
<li>Links</li>
<li>Email Me</li>
</ul>
</nav>
</body>
</html>
I found that the file extension on some of the pictures was capitalized. These pictures wouldn't load until I changed .JPG to .jpg.

Selecting text using xpath when only preceding items have identifiers

I have code that follows the following format as below. I'm trying to use xpath to select the 2nd paragraph (eg the paragraph that starts: Assisted living is a great option for all walks of life...Given that the div and the paragraph have no easy identifiers, I tried:
//div[preceding-sibling::div[#id='w_29207']]/p[2]
I would think that the first portion //div....29207']] would select the div that is preceded by the div with the id 29207. Then the /p[2] would pick he 2nd paragraph.
<div id="w_29207" class=" city short-description">
<div>
<p>
<span itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="Albuquerque, NM Assisted Living Facilities" />Choose from over 38 Assisted Living communities in Albuquerque, NM and
<span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">see
<meta itemprop="reviewCount" content="360 reviews "/>360 reviews with a
<meta itemprop="ratingValue" content="4.0 stars out of 5" />4.0 average rating.
<meta itemprop="description" content="Albuquerque attracts seniors looking for an active senior living experience. The city enjoys four distinct seasons with stunning winters and sunny summers. Seniors in Albuquerque find various cultural outlets and outdoor recreation including an active theater community, festivals, hiking and climbing. " /> We've helped 9,287 families in Albuquerque, NM where Assisted Living ranges from $</span><span itemprop='offerDetails' itemscope itemtype='http://schema.org/AggregateOffer'><span content='1,550' itemprop='lowPrice'>1,550</span> to $<span content='6,100' itemprop='highPrice'>6,100</span>.
<meta content='USD' itemprop='priceCurrency'>
</span></span></p>
<p>Assisted living is a great option for all walks of life. Whether you or a loved has experienced a life changing health diagnosis or you want to shed the burdens of home maintenance from your life, assisted living in Albuquerque could be the perfect match for you. Many seniors in Albuquerque have chosen to transition to assisted living so they can enjoy a sense of community with like-minded neighbors. Another perk of assisted living is for seniors that may need assistance with daily tasks such as, meal preparation, medication management, or help getting to appointments.
</p>
p[2] will work if p elements are sibling.
Some of the options:
//*[contains(#class, 'city short-description')]/div/p[2]
//*[#class='city short-description']/div/p[2]
//div[contains(#class, 'city')]/div/p[2]
//div[contains(#id, 'w_')]/div/p[2]
If you need to return the text and not the element add an /text() after p[2]
The problem appears to be that the second <div> is not a sibling of the <div id="w_29207">, it's a child of it (unless the HTML you posted is wrong). That's why //div[preceding-sibling::div[#id='w_29207']] doesn't select the second <div>.
Instead, you could use
//div[#id='w_29207']/div[1]/p[2]
or any of the options that #lauda mentioned, depending on how precise you have to be about the id attribute.
You can try with following xpath as well :-
//p[not(child::*)]
or
//p[ancestor::div[#id='w_29207']][2]
or
//div[#id='w_29207']/descendant::p[2]
or
//p[ancestor::div[#id='w_29207'] and not(child::*)]
Hope it helps..:)

Is there any way to format style and text inside the Text Area?

Hi have the code where i whrite the code inside the Text area to get the format like below.But my problem is the text is format correctly and how i can place the same text format inside the textarea.
<input type="textarea">
<P align = center>
<B>About Salman Khan </B>
</P>
<P align = left>Salman Khan (pronunciation born Abdul Rashid Salim Salman Khan on 27 December 1965)[5] is an INDIAN film actor and producer. He is cited in the media as one of the most commercially successful actors of Hindi cinema.
</P>
<P>
<ul>
<li>Undertake our tasks and activities in utmost good faith, objectivity, transparency, competence, due care and professionalism.</li>
<li>Abide by the highest standards of politeness and good conduct.</li>
</ul>
</P>
</input>
Sorry, you can't style a textarea. However it does seem like there are some workarounds available. Here's the first thing I found:
Format text in a <textarea>?
So basically you put all your content in a div and style it to make it work like a text area. Here you can see I've made it scrollable, made it editable, plus setting the height/width and borders. (There don't need to be set, depending on exactly what you want.) I think the biggest problem here is that different browsers style text areas differently so there probably is no really easy to way style it so it looks exactly like a native textarea in all browsers.
<div id='fake_textarea' style="overflow:scroll; height:100px; width:400px; border:solid; border-width:1px" contenteditable>
<P align=center>
<B>About Salman Khan </B>
</P>
<P align=left>
Salman Khan (pronunciation born Abdul Rashid Salim Salman Khan on 27 December 1965)[5] is an INDIAN film actor and producer. He is cited in the media as one of the most commercially successful actors of Hindi cinema.
</P>
<P>
<ul>
<li>Undertake our tasks and activities in utmost good faith, objectivity, transparency, competence, due care and professionalism.</li>
<li>Abide by the highest standards of politeness and good conduct.</li>
</ul>
</P>
</div>
Notice that this the same as your code, except I replaced the input tag with a styled div.
See the posts in the above answer if you need to be use this field in a form and must submit the contents. It takes a minor work around.

How to set two different font sizes in the same <p>

I have a piece of HTML code that i'm stuck with.
How can I set the first part of this text to a font-size of 20px and the text after the <br> tag to a font-size of 15px?
Or if I'm doing it completely wrong, how would I do it without having them in different tags
<p id="losinfo"> Los Santos: a sprawling sun-soaked metropolis full of
self-help gurus, starlets and fading celebrities, once the envy of the
Western world, now struggling to stay afloat in an era of economic
uncertainty and cheap reality TV <br><br> Our largest open world yet
- by far - and spanning vastly diverse cultural and geographical areas,
the entire world of Grand Theft Auto V is open from the very beginning
of the game to explore. Visitors to the greater metropolis of Los Santos
and the countryside of Blaine County will encounter faded celebrities,
meth heads, party people, violent gangs, hikers, bikers and every other
manner of colorful denizen. You'll be able to traverse everywhere from
the tops of the mountains, through the streets of Los Santos and to the
depths of the ocean floor</p>
<p id="losinfo">Los Santos: <span id="secondText"> a sprawling sun-soaked ...</span></p>
Then style #losinfo and #secondText differently in css.
Your question is a bit unclear.
Are you meaning something like this?
<p id="losinfo">
<span style="font-size:20px;">Los Santos</span>
<span style="font-size:15px;">: a sprawling sun-soaked metropolis [...]</span>
</p>
Try
CSS
p#losinfo {
font-size:20px;
}
p#losinfo span {
font-size:15px;
}
Html
<p id="losinfo"> Los Santos: a sprawling sun-soaked metropolis full of self-help gurus, starlets and fading celebrities, once the envy of the Western world, now struggling to stay afloat in an era of economic uncertainty and cheap reality TV <br><br>
<span>Our largest open world yet - by far - and spanning vastly diverse cultural and geographical areas, the entire world of Grand Theft Auto V is open from the very beginning of the game to explore. Visitors to the greater metropolis of Los Santos and the countryside of Blaine County will encounter faded celebrities, meth heads, party people, violent gangs, hikers, bikers and every other manner of colorful denizen. You'll be able to traverse everywhere from the tops of the mountains, through the streets of Los Santos and to the depths of the ocean floor</span></p>
Use a div around the part you want 20px and another div around the part you want 15px is what I would do. Then set those divs with classes and set the font-size in css.
I came across this question because I was trying to figure out how to change font in the same line of text. Lo and behold, span also works for this. Here's without the ids, for simplification:
To change font size
<p>regular text <span style="font-size: 30pt;">new size text</span></p>
To change font
<p>old font <span style="font-family: courier;">new font</span></p>