An ENG355 Sample Neocities
Welcome. This page is intended to show you some possibilities for HTML (and CSS) that are available to you if you are developing your concept website using neocities.
Your first point of reference should be the neocities tutorials, of course. This site serves only as a quick-and-dirty supplement to what you’ll find there, featuring some things I think you might want to know how to do.
Content Position and Margins
If you’ve played around with HTML a little, you may have noticed
that, by default, your text and images begin at the left margin and
extend all the way to the right (or further). This is not ideal, of
course, so one CSS directive you might want to know is
width. For example:
/* Make the width of every paragraph be 500 pixels: */
p {
width: 500px;
}
/* Make the width of every image be 500 pixels: */
img {
width: 500px;
}(You can copy and paste any example CSS code directly into your
style.css file, if desired.)
CSS respects how elements in your site are nested, and allows you to specify widths in percentages. Let’s say your HTML looks like this:
<body>
<p>Here is my first paragraph.</p>
<img src="/picture.jpg">
<p>Here is my second paragraph.</p>
</body>If that’s the case, you can make everything have the width of 500 pixels with the following CSS code.
/* Everything in the <body> tag has a width of 500 pixels */
body {
width: 500px;
}
/* Every image takes up 100% of the 500 pixel body */
img {
width: 100%;
}
/* Every paragraph does the same */
p {
width: 100%;
}We can take this one step further. HTML also has tags that, by
themselves, don’t really do much, but can be styled further by CSS. For
example, there is the <article> tag, which just means
“everything contained in this tag is part of the article I’m writing.”
Using this tag, you might write the following:
<body>
<article>
<p>Here is my first paragraph.</p>
<img src="/picture.jpg">
<p>Here is my second paragraph.</p>
</article>
</body>All by itself, this won’t affect anything, but you can use CSS to affect the outcome:
/* Everything in the article tag has a width of 500 pixels and a
left margin of 200 pixels */
article {
width: 500px;
margin-left: 200px;
}
/* Every image inside the article takes up 80% of the 500 pixels,
and has a margin of 10% on each side */
img {
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
/* Every paragraph inside the article takes up 100% of the 500
pixels. */
p {
width: 100%;
}Colors
CSS has two directives for specifying colors:
background-color, which quite obviously specifies the
background, and color, which not-so-obviously specifies the
color of the text. You can use these on any element. So the following
CSS code makes sense (and is also the CSS code for the page you are
currently looking at):
/* This entire page has a black background */
body {
background-color: black;
}
/* But everything in the <article> tag has a white background,
as well as a width and margins */
article {
background-color: white;
width: 500px;
margin-left: 200px;
}
/* Every image inside the <article> tag takes up 80% of the 500
pixels, with margins on either side. */
img {
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
/* Paragraphs take up 100% of the 500 pixels */
p {
width: 100%;
}