C.R.A.P. Design

* Contrast: Contrast refers to any difference of size, shape, or color used to distinguish text (or other elements, though here we’re focusing on text) from other pieces of text. The use of bold or italics is one common form of contrast — the difference in shape makes the bolded or italicized text stand out from the surrounding text. Increasing the size of headers and titles, or using ALL CAPS or smallcaps are other ways of distinguishing text. These techniques only work if used sparingly; a document typed in all capital letters has less contrast than one typed normally, so is harder, not easier, to read. * Repetition: Repetition in your text is bad; repetition of your design elements is not only good but necessary. Once you’ve decided on a size and typeface for second-level headers, for instance, all second-level headers should look the same. For most documents, two or maybe three fonts — leaning heavily on one for all the body text, with the other two for headers and maybe sidebars — are enough. The same bullets should be used on every bulleted list. Information that appears on every page should appear in the same place on every page. Design elements — like horizontal rules between sections or corporate logos — should appear the same whenever they are used throughout the document. Repetition of design elements pulls the document together into a cohesive whole, and also improves readability as the reader comes to expect text that looks a certain way to indicate certain qualities (e.g. the start of a new section, a major point, or a piece of code. * Alignment: Alignment is crucial not just to the cohesive appearance of your document but to the creation of contrast for elements like bulleted lists or double-indented long quotes. Your document should have a couple of vertical baselines and all text should be aligned to one of them. Unaligned text floats mysteriously, forcing the reader to figure out its relation to the rest of the document. Centered text is particularly bad (and is a novice’s favorite design trick). One immediate step you can take to vastly improve the appearance of your documents is to remove the “center” button from your software’s toolbar (or, less drastically, just ignore it). It is rarely self-evident what centering is meant to communicate, and too much centered text creates a sloppy, undisciplined look. * Proximity: Pieces of information that are meant to complement each other should be near each other. One great offender here is business cards and ads in local newspapers, where the name, address, and phone number are all scattered around the ad or card (for example, in the corners). Your reader shouldn’t have to seek out the next logical piece of information; rather, use proximity to make sure that the next piece of information a reader sees is the next piece of information they should see. None of these principles stands alone. Repetition and alignment together create the “normal” state that allows changing the shape or position of a piece of text to produce contrast; repetition and proximity go hand-in-hand to create useful formats like bulleted lists — the repetition of the bullet adds force to the proximity of the points. In fact, the bulleted list above uses all four of these principles to work: it contrasts with the body of this article by being aligned to a different baseline than the rest of the paragraphs; each principle is in boldface, providing contrast, and is also directly followed by its explanation, providing proximity; the bullets, the boldfaced text, and the alignment are repeated in each new point on the list. Almost all design builds on the foundation laid out above. Asking yourself how well each element of your layout satisfies these basic principles is a good way to make sure your work remains readable to your audience while also communicating a bit of your organization’s or business’ character. You may already unconsciously use these principles in your work, but knowing the principles and recognizing their use will help you make better, more conscious decisions in the future. Ultimately, the goal is for the work you put in to designing a document to disappear, to become invisible, leaving your reader or viewer with unfettered access to the points you are trying to convey — both directly in your text and, ever-so-subtly, in your choice of design elements. In this respect, it’s a thankless job, because only rarely will anyone comment on (or even notice) the quality of design — but they will notice, and act on, the message. And that’s what’s important, isn’t it? WHAT DID I LEARN? Using crap design makes our page more attractive.

MINIMAL HTML DOCUMENT

Every HTML 3.2 document must also include the descriptive title element. At the time HTML 3.2 was the recommended spec, very few web designers bothered with a DOCTYPE, or with valid code at all, so in practice an HTML document could be any text file containing any combination of text and HTML tags. These days, the needs of accessibility, search engine optimization, document consistency for JavaScript manipulation, and support for international characters all combine to require more of our HTML. The minimal HTML document has gotten a lot bigger. The Breakdown Every (X)HTML document should start with a DOCTYPE declaration that tells the browser what version of (X)HTML the document is written in. In practical terms, this tells browsers like Internet Explorer and Firefox to use their most standards-compliant (and therefore cross-browser-compatible) rendering mode. Next, we mark the start of the document with the opening html tag. This tag should should specify the primary language for the document’s content, with the lang attribute. In an XHTML document, you should also specify the document’s default XML namespace (using the xmlns attribute) and re-specify the language using XML’s standard xml:lang attribute. Next comes the head tag, which starts the document header. The first thing in the header should be a meta tag that specifies the character encoding of the page. Usually, the character encoding is declared by the web server that sends the page to the browser, but many servers are not configured to send this information, and specifying it here ensures the document is displayed correctly even when it is loaded directly from disk, without consulting a server. In an XHTML document, meta tags should end with a slash to indicate they are empty. With the encoding established, we can safely write the first piece of actual content in the page—the page title. If you want to link a CSS file to the page to control its appearance (which you usually will), a link tag at this point will do the trick: Again, the XHTML version of this tag needs a trailing slash to indicate it is empty. If you want to link a JavaScript script to the page, and the script is designed to be invoked from the header, insert a script tag at this point. Whether the document is HTML or XHTML, you should include a full script closing tag for backwards compatibility. That just about does it. You can end the header, then start the body of the page with a body tag. The content of the page is up to you, but since we’re talking about a minimal document, there need not be any body content at all. So, how does your most recent work hold up? Have you included all the elements discussed above? Common omissions like the lang attribute and the content-type meta tag may seem unnecessary, but they really put that final layer of polish that ensure your site holds up with the best on the Web.

ELEMENTS

INLINE ELEMENTS-Most inline elements in XHTML are elements used to style content. This means that they allow the author to alter how content looks. These elements are called styling elements and exist only to alter the appearance of the text. Many styling elements have been deprecated in favor of style sheets, but they are still largely in use
The short definition is that inline elements are elements that are found in the text of the HTML document. They are also sometimes called text level elements.

Inline elements have some specific distinctions from block-level elements:

Inline elements generally only contain text, data or other inline elements. They are usually "smaller" than block-level elements.
Inline elements do not generally begin new lines of text.
Inline elements inherit directionality information differently from block-level elements.

BLOCKED ELEMENTS- The basic building blocks of an XHTML document are the elements that form the primary content of the document. These elements are usually referred to as block elements since they take the form of discrete blacks of text on the screen. Block elements always begin on a new line when displayed.

ADDRESS - Address
BLOCKQUOTE - Block quotation
CENTER - Centered block
DIR - Directory list
DIV - Generic block-level container
DL - Definition list
FIELDSET - Form control group
FORM - Interactive form
H1 - Level-one heading
H2 - Level-two heading
H3 - Level-three heading
H4 - Level-four heading
H5 - Level-five heading
H6 - Level-six heading
HR - Horizontal rule
ISINDEX - Input prompt
MENU - Menu list
NOFRAMES - Frames alternate content
NOSCRIPT - Alternate script content
OL - Ordered list
P - Paragraph
PRE - Preformatted text
TABLE - Table
UL - Unordered list

The following elements may also be considered block-level elements since they may contain block-level elements:

DD - Definition description
DT - Definition term
FRAMESET - Frameset
LI - List item
TBODY - Table body
TD - Table data cell
TFOOT - Table foot
TH - Table header cell
THEAD - Table head
TR - Table row

HTML DOCUMENT

An HTML element is an individual component of an HTML document. HTML documents are composed of a tree of HTML elements and other nodes, such as text nodes. Each element can have attributes specified. Elements can also have content, including other elements and text. HTML elements represent semantics, or meaning. For example, the title element represents the title of the document.

In the HTML syntax, most elements are written with a start tag and an end tag, with the content in between. Tags are composed of the name of the element, surrounded by angle brackets. An end tag also has a slash after the opening angle bracket, to distinguish it from the start tag.

The span tag is used to group inline-elements in a document.The span tag provides no visual change by itself.The tag provides a way to add a hook to a part of a text or a part of a document.The HTML span tag is used for grouping and applying styles to inline elements.The HTML span tag provides a way to define attributes to a piece of text. It's mostly used in conjunction with style sheets to set presentational attributes that will define the visual style of the content.

The div tag defines a division or a section in an HTML document.The div tag is often used to group block-elements to format them with styles.The div is a generic block-level element. It doesn’t convey any meaning about its contents (unlike a p element that signifies a paragraph, or an h1 or h2 element that would indicate a level 1 or level 2 heading, respectively); as such, it’s easy to customize it to your needs. The div element is currently the most common method for identifying the structural sections of a document and for laying out a web page using CSS.

BASIC DOCUMENT STRUCTURE

HEAD- The head element is a container for all the head elements. Elements inside head can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

BODY- The body element defines the document's body.The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

HTML- which stands for HyperText Markup Language, is the predominant markup language for web pages. HTML is the basic building-blocks of webpages.

HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets within the web page content. HTML tags normally come in pairs like h1 and h1. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tables, images, etc.

P- The p element automatically creates some space before and after itself. The space is automatically applied by the browser, or you can specify it in a style sheet.

BR- The br tag inserts a single line break. The br tag is an empty tag which means that it has no end tag.

H1- h1 defines the most important heading. h6 defines the least important heading.

TITLE-defines a title in the browser toolbar. It provides a title for the page when it is added to favorites. It displays a title for the page in search-engine results.

Life:)

Life:)
A Wonderful Life

A life is a blessing from God that we had to enjoy and gave an importance. The feeling of being alive is what makes us to experience and explore different things. Even if sometimes in our life we have problems and troubles, it is part of it that we had to face and find a solution for it. The difficulties of life are meant to make us better and strong in many problems that come in the future. For me life is really simple but there are others insist of making it complicated.

Why life is really wonderful? It is because in life many experiences we can encounter. Many happy moments we can enjoy, like bonding with our family and with our friends. We can also feel how to be love by someone else, for us to find. But like a wheel, were not always on top, our life is not always contain a happy moments, sometimes we encountered problems that can makes us to lose hope.

Life is really wonderful. It is because in life we experience different feelings and moments.. We experience to be happy and sad, to be enjoy and bored, to be poor and to be rich, to hard work and to succeed, to feel the love and accept the pain that undergoes with it and most of all to have a mistakes and learn the lesson from it. Life is a succession of moments. To live each one is to succeed. We have to enjoy our life because it has a limitations. Always remember, the beauty of life does not depends on how happy you are but how happy others because of you.

This Is Me Imperfect But Real

This Is Me, Imperfect But Real

Hi! I’m Catherine Ponce Salvador, 13 years old and born on July 25, 1997. I live in Old San Jose Dinalupihan, Bataan. I’m a third year high school of Saint John Academy. I’m one of the smallest girl in our classroom but still I accept it because the thruth sometimes hurt.


Many things I love to do especially when weekends or free time comes like watching television specially Korean Novelas. I love watching it because it inspired me a lot. I also love different outdoor games and when res time, I’m listening the hits of Taylor Swift cause she is my idol. I also love cooking with my mother and sharing meal with my family. Most of all I love texting and chatting with my lovable friends.


Friendship for me is very important aspects of our lives that why we have to take care our friendship. I’m a kind of friend who is understanding and always here to support and help in times of problems and troubles. I hate those friends who are pretending to be friends but fighting me back. I also hate persons who are over acting in many things. I love persons who are trustable and hate those entrust especially when it comes in keeping secrets. I’m a kind of person who can surely forgive but never be forget. That’s all. This is me, imperfect but real.