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.
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">
So I was told that you can set a certain tag in a html page that will tell search engines what kind of page it is (like if the tag was set to game then google would organize it as game). What tag would this be done in and how would it be found?? (I was told this by older brother so If not possible or is false information I will understand)
You can use structured data in your website to tell the search engines what is described on the page and give machine readable details.
This is (at this time) the recommended way by Google.
The format for this is described in great detail on http://schema.org, the types can be found here:
http://schema.org/docs/full.html
To address your example, here is the sample from the type Game (copy&paste):
<section itemscope itemtype="http://schema.org/Game">
<section itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span>Approx. Retail:</span>
<span itemprop="priceCurrency">$</span><span itemprop="price">17.99</span>
Where To Buy
</section>
<span itemprop="audience" itemscope itemtype="http://schema.org/PeopleAudience">
Ages: <span itemprop="suggestedMinAge">8</span> YEARS & UP
</span>
<h4>Game Description:</h4>
<p itemprop="description">Own it all as a high-flying trader in the fast-paced world of real estate. Tour the city for the hottest properties: sites, stations and utilities are all up for grabs. Invest in houses and hotels, then watch the rent come pouring in! Make deals with other players and look out for bargains at auction. There are many ways to get what you want. For really speedy dealers, use the speed die for a quick and intense game of Monopoly. So get on Go and trade your way to success!<br/><br/>Includes <span itemprop="gameItem">gameboard</span>, <span itemprop="gameItem">8 tokens</span>, <span itemprop="gameItem">28 Title Deed cards</span>, <span itemprop="gameItem">16 Chance cards</span>, <span itemprop="gameItem">16 Community Chest cards</span>, <span itemprop="gameItem">money pack</span>,<span itemprop="gameItem"> 32 houses</span>, <span itemprop="gameItem">12 hotels</span>, 2 dice and instructions<br/><br/>•Features a speed die for a faster, more intense game<br/>•Includes the new token that was voted No. 1: the cat<br/><br/>For <div itemprop="numberOfPlayers" itemscope itemtype="http://schema.org/QuantitativeValue">
<span itemprop="minValue">3</span> to <span itemprop="maxValue">5</span> players </div>.<br/><br/>Ages 8 and up.<br/><br/>Monopoly and all related characters are trademarks of <span itemprop="copyrightHolder">Hasbro</span>. <P></p>
</section>
As you can see there are several attributes like itemtype, itemprop etc. added that contain the data that is targeted for search engines. These attributes vary from type to type.
Google does a lot more than read tags to organize pages and rank them. However, there is a tag defined in HTML to describe keywords and other information about your page.
Placed in the head of your HTML document, the meta tag can be used to define your pages character set, add a description, keywords and an author (amongst other things).
For example:
<head>
<meta charset="UTF-8">
<meta name="description" content="Jordan's Homepage">
<meta name="keywords" content="Games, younger brothers, stack overflow">
<meta name="author" content="Jordan 1591">
</head>
Google's ranking algorithms are very complex and not publicly known in their entirety, partly to prevent people from abusing them and being unfairly ranked highly, but any seach engine -including Google - will look at meta tags as a bare minimum.
I am trying to get my html website page to have the "Most Beautiful Theorem?" section on the right side. However, I can't figure out how to do that. Right now it is just showing up under all my other headings like normal but I want it on the right side of the page as a separate column. If you could help me that would be great. Thanks!
here's the coding I have now:
<!DOCTYPE html>
<html lang="en">
<!-- Math High home page
McLain-Graning MaKayla, CSIS 140, Fall 2015
-->
<head>
<meta charset="utf-8" />
<title>Math High</title>
<link href="css/MathHighStyles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header>
<img src="images_MathHigh/mhlogo.jpg" alt="Math High"/>
<h2>Leonhard Euler (1707-1783)</h2>
</header>
<section>
<article>
<p>
The greatest mathematician of the eighteenth century,
<strong>Leonhard Euler</strong> was born in Basel, Switzerland. There,
he studied under another giant of mathematics, <strong>Jean
Bernoulli</strong>. In 1731 Euler became a professor of physics
and mathematics at St. Petersburg Academy of Sciences.
Euler was the most prolific mathematician of all time,
publishing over 800 different books and papers. His
influence was felt in physics and astronomy as well.
</p>
</article>
<p>
He is perhaps best known for his research into
mathematical analysis. Euler's work,
Introductio in analysin infinitorum (1748),
remained a standard textbook in the field for
well over a century. For the princess of Anhalt-Dessau he wrote
Lettres a une princesse d'Allemagne (1768-1772),
giving a clear non-technical outline of the main
physical theories of the time.
</p>
<p>
One can hardly write a mathematical equation without
copying Euler. Notations still in use today, such
as e and pi, were introduced
in Euler's writings. Leonhard Euler died in 1783,
leaving behind a legacy perhaps unmatched, and
certainly unsurpassed, in the annals of mathematics.
</p>
</section>
<aside>
<h1>The Most Beautiful Theorem?</h1>
<p>Euler's Equation:</p>
<p>cos(x) + i*sin(x) = e to the power (i*x)</p>
<p>demonstrates the relationship between algebra,
complex analysis, and trigonometry. From this
equation, it's easy to derive the identity:
</p>
<p>e to the power (pi*i) + 1 = 0</p>
<p>which relates the fundamental constants:
0, 1, pi, e, and i in a single beautiful and
elegant statement. A poll of readers
conducted by The Mathematical Intelligencer
magazine named Euler's Identity as the
most beautiful theorem in the history of
mathematics.</p>
<p>Math High: A Site for Educators and Researchers</p>
</aside>
</body>
</html>
Give the h1 element an id or a class name and add a CSS style to make the heading float.
See http://www.w3schools.com/css/css_float.asp
I've reviewed https://stackoverflow.com/questions/5542428/why-on-earth-is-address-a-block-level-element already and found that it adds little insight to the matter.
A client gave me a paragraph of plain text, and I'm attempting to optimize it for both user experience and SEO. Here's the relevant snippet, from the middle of the text:
<p>[Several sentences]. Having trouble? Contact <address style="font-style:normal;display:inline">Jane Doe at jdoe#example.com or (555) 123-4567</address> between the hours of 9AM and 5PM. [Several sentences].</p>
However, since <address> is a block-level element, the DOM ends up looking like this:
<p>[Several sentences]. Having trouble? Contact </p>
<address style="font-style:normal;display:inline">Jane Doe at jdoe#example.com or (555) 123-4567</address>
between the hours of 9AM and 5PM. [Several sentences].<p></p>
and the output looks like this:
[Several sentences]. Having trouble? Contact
Jane Doe at jdoe#example.com or (555) 123-4567
between the hours of 9AM and 5PM. [Several sentences].
Obviously, this breaks the UX, and isn't valid HTML. My questions are What is the reasoning behind <address> being block-level only, and is there any way I can make it display inline? As you can see, the CSS display:inline attribute/value does nothing to help the situation
Why can't address elements be in p elements?
Because the HTML specification defines them that way.
The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.
What this means is that <address> elements aren't meant to be used to mark up any old address. The implication is that you'd be using the <address> as a means of contacting the source of the article. Within an article, discussing "123 fourth street" would not merit using an <address> element.
If you want to describe it as an address for styling purposes, you could always give it a class as:
<span class="address">123 fourth street</span>
Don't use the <address> element for generic addresses, instead use the Person schema with Microdata, or the hCard Microformat, or RDFa. Here's a example with Microdata:
<p itemscope itemtype="http://schema.org/Person">
[Several sentences]. Having trouble?
Contact <span itemprop="name">Jane Doe</span> at
<a itemprop="email" href="mailto:jdoe#example.com">jdoe#example.com</a>
or <a itemprop="telephone" href="tel:5551234567">(555) 123-4567</a>
between the hours of 9AM and 5PM.
[Several sentences].
</p>
You can test the data extraction with Google Webmaster Tools (scroll down to the section titled 'Extracted structured data').