Webdesign 2 placeholder for the text that I have to summarize. Texts - büah.
So, the first two articles of four.
HTML Forms - The Basics
Everyone knows so and what forms used. The fields, where even something simply written and can also send, or the fields, where round (radio button) and square (check boxes) boxes and can click on the website (something happens in the backend of the page). Which are used quite often containing: name for login screens, wrote Satus news, twitter, etc.
It is relatively easy to create a form, but not so easy to create a form that complies to web standards. That's the only way to get good progress and to create websites that are "more stable".
So just the simplest form, three fields, name, e-mail and comment. Plus the "submit" button, of course by itself
\u0026lt;form>
Name: \u0026lt;input type="text" name="name" id="name" value="" />
Email: \u0026lt;input type = "text" name = " ; email "id =" email "value =" "/>
Comments: \u0026lt;textarea name="comments" id="comments" cols="25" rows="3"> ; \u0026lt;/ textarea>
\u0026lt;input type = "submit" value = "submit" />
\u0026lt;/ form>
\u0026lt;form> \u0026lt;/ form> one needs to tell the browser that it is a form. can
\u0026lt;input> here you define what's so pure. All tags \u0026lt;input> need a name that indicates what should be entered in the field. And then
\u0026lt;textarea>. Super good. No one line, but an entire block in which you can write something. With colums and rows, you can define the size of the text area.
And Finally a \u0026lt;input> tag, with value = submit. This causes a "submit" button, so the user can send his information and his comment also.
It is also possible to style this form tag, get with \u0026lt;ol>, \u0026lt;il>, etc. to more structure.
The hardest thing now is actually more then, is to get the whole even if the user submits his information. This is needed but other guns and have to deal with php and so familiar.
In times of Wordpress and its many plug-ins anyway, everything is pretty simple.
CSS layout model - boxes, bordewrs, margins and padding
This article is about changing how to "manipulate" HTML elements can, and embellish with the help of edges (border), margins (margins) and much more.
Man, the arrangement may affect the different elements that change sizes so to speak, and with white space (according to the author of an important means loud I do not really pay attention, just a good white space and it looks great - most blogs will work under the system) .
white space around an object reaches one margin with:
These edges You can select individually or all together. The values are in px or em, for print style sheets in cm. Also% is allowed, only you must handle it carefully - not that it rips at the end of the page, because some information relating to the parent element and not the whole page.
auto-margins:
# idirgendwas
{margin: 50px auto;}
The div with the id idirgendwas then stands in the middle of the browser window up and down with a distance of 50px. The first value is namely at the top and bottom, the second right and left. So in short written CSS in html {}, already the site is centered.
Nor can the values negative (negative margins) indicate, in order to superimpose two different Elemte, no problem, minus (-) before and done. Long live the digital age.
Collapsing margins (translation does not need it, I know not):
The values can also specify for each edge separately: #
idirgendwas
{margin: 5px 10px 20px 0px;}
So the div idirgendwas of above a distance of 5px, 10px right, bottom left and 20px 0px. The entire proceeds clockwise, beginning at the top, padding is on the same - even realize it all fits.
If you feel too stupid, you just want to make a margin, is also on the margin-right, margin-left, margin-top and bottom margin.
Border
There are several ways to address border:
* border-width
* border-style
* border-color
* border-top
* border-top-width
* border-top -style
* border-top-color border-right
*
* border-right-width
* border-right-style
* border-right-color * border-bottom
* border -bottom-width
* border-bottom-
* border-bottom-color
* border-left style
* border-left-width
* border-left-style
* border-left-color
Looks a lot, right? Yes.
I myself have the up to now done in one go, namely:
# idirgendwas
{border: 2px solid # 000000;}
So the edge has a 2px large, continuous line in black. Man, the "solid" and erstzen by double, dotted, dashed, etc., just look up once in the accompanying article, there are examples.
If sufficient margins no longer:
padding padding is the padding from the edge to the text. If you have a colored surface, and is purely text, depends on the text at the edges, it looks ugly. Will you get the text away from the edge, you have to use padding. The margin is the same as with regard to the input of the values.
Width and height:
One can define the one hand, the width (width) and height (height) of an element, be it with pixel data or percentages or em or whatever it is. But be careful: Always remember that these are not the only criteria for the appearance of the elements, but that margin and padding to play an important role.
What is beautiful is, among other max-width, min-width, max-height and min-height. If I have centered my side, I can eg specify max-width, that it should be 690px wide - maximum. And already the site sits in the center and the right size browser window. If the window is, however, should take less (or the resolution of the desired width hergibt not) you can work with at widht and give him to understand: to here and will not be my friend! At some point, the smaller the side pull even be concluded, is not it?
What happens when the content of hand, he wants to the available size out? Overflow of course!
What is there so there: overflow: hidden, visible, and auto scroll. Even a normal CSS statement.
hidden: The above heading is not displayed.
visible: The above heading is displayed, but one can destroy the layout.
car: The text produced überstehnde eien side scroll bar.
scroll: Creates a horizontal and vertical scrollbar, even if the text is about the size of the item.
