Teaching some code

Question

Teaching some code

Ultrilliam · Answer

@Bearclaws72

Ultrilliam · Answer

You start a HTML doc with <!DOCTYPE html>

Bearclaws72 · Answer

ok

Bearclaws72 · Answer

Got it

Bearclaws72 · Answer

Ok now how to I put words in it and graphics?

Bearclaws72 · Answer

<H1> ?

Ultrilliam · Answer

next come the tag, pretty much everything goes in here.

Bearclaws72 · Answer

Yah

Bearclaws72 · Answer

Then put the link adress in the middle right?

Ultrilliam · Answer

Nope

Bearclaws72 · Answer

oh

Ultrilliam · Answer

in HTML goes the body and head tag.

the head tag is where the title of the page, scripts for the page, and CSS goes.

the body tag is where the content of the page goes, so everything that goes in a page goes here.

Ultrilliam · Answer

Now input that in, and screenshot what you get.

Bearclaws72 · Answer

How do I screen shot on windows I forgot

Ultrilliam · Answer

printscreen

Ultrilliam · Answer

then just hit ctrl+v here ^_^

Ultrilliam · Answer

(while typing a reply)

Ultrilliam · Answer

annnnnnnnnd he died

Bearclaws72 · Answer

No I didnt tryin to figure this out

Bearclaws72 · Answer

@Ultrilliam

Ultrilliam · Answer

hit print screen

Ultrilliam · Answer

and while typing a reply, right click and hit paste.

Bearclaws72 · Answer

<!DOCTYPE html>
<HTML> </HTML>

Bearclaws72 · Answer

Thats whats on my note pad right now

Bearclaws72 · Answer

@Ultrilliam  Is this correct?

Ultrilliam · Answer

so far

Ultrilliam · Answer

but you didn't add the body and head tags in

Ultrilliam · Answer

btw,
\```
insert code here
\```

Bearclaws72 · Answer

What body and head tags like the name of the website?

Bearclaws72 · Answer

I came up with this code for the font

Bearclaws72 · Answer

h1 { font: bold 12pt times;}

Ultrilliam · Answer

look up to where i mentioned the body and head tags

Bearclaws72 · Answer

ok

Bearclaws72 · Answer

So the head Tags Go where it says ?

Bearclaws72 · Answer

|dw:1504123519449:dw|

Ultrilliam · Answer

```
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
```

Bearclaws72 · Answer

So Body is what it says under the head?
So replace the words Head with what I want it to be?

Bearclaws72 · Answer

@Ultrilliam

Ultrilliam · Answer

that is the basic format of the HTML page

Ultrilliam · Answer

what goes in the body tag is what is displayed

Bearclaws72 · Answer

So I was right with that response?

Ultrilliam · Answer

what goes in the head tag is what is not displayed

Ultrilliam · Answer

(I have no idea)

Bearclaws72 · Answer

ok

Ultrilliam · Answer

Now, there are different elements that goes into the body tag, here are a few,

it is a container element, it divides the page in 2 (a horizontal split) this is another container element, however it's a INLINE container, unlike DIV it does not divide.

-

These are predefined header elements
While this is a official element, it doesn't actually do anything, however it's mostly for organization purposes.
While this is a official element, it doesn't actually do anything, however it's mostly for organization purposes.
This tag is to divide a page into sections, it can be used to divide a group of DIVs instead of using another DIV, but it can also be used to separate paragraphs or something like that
this starts a unordered list, of which you would use
for each list element
this starts a ordered list, of which you would use
for each list element This allows you to comment out things in HTML

Ultrilliam · Answer

There are tables as well, which are formatted like this: the top most tag of a table this is the row of a table

This is the header row of a table

this is the body row of a table An example of a table would be this: ```

1	2	3
one	two	three
red	green	blue

```

Bearclaws72 · Answer

Alright its probaly gonna take me some time and experimentation to learn all this but thanks Ultri Sensai you dah bomb

Bearclaws72 · Answer

But we will continue tommorow

Bearclaws72 · Answer

@Ultrilliam  Thanks for real tho lol

Bearclaws72 · Answer

Hopefully I can make a career out of this thats my dream at least

Ultrilliam · Answer

^_^

Ultrilliam · Answer

Np :P

Ultrilliam · Answer

@dude

Ultrilliam · Answer

hey read this post, then we can get stared on some more if you like x'D

dude · Answer

So much to read, doesn't help that I just started doing java

Ultrilliam · Answer

x'D

Bearclaws72 · Answer

I would download bluej dude

dude · Answer

K downloading...

Ultrilliam · Answer

http://www.bluegriffon.org/ for web design ¯\_(ツ)_/¯

Ultrilliam · Answer

@ThewaffleBRO

Bearclaws72 · Answer

What are we learning today

Ultrilliam · Answer

@Aureo

Aureo · Answer

Hellu

Ultrilliam · Answer

Now then, Lets go about learning HTML attributes. Lets go for something like ```

``` What this does is set the attribute of a element to be accessed later. in this example "id" is the attribute, and "idname" is the value of the attribute

Aureo · Answer

Ah.

Bearclaws72 · Answer

Oh lessons Finally e_e

Aureo · Answer

*gets notepad++ up*

Ultrilliam · Answer

There are a few HTML attributes the browser will use for various things, and different elements have special attributes to it (for example the <form> element has "novalidate" attribute, which makes it so the input fields in the form is not validated before submission)

Some examples of browser attributes:
$\sf\color{blue}{id}$: as the name implies, it is used to $\sf\color{red}{identify~a~specific~element}$: Ids should only be used once,
$\sf\color{blue}{class}$: It also serves to $\sf\color{red}{identify~multiple~elements}$,
$\sf\color{blue}{style}$: This attribute as the name implies is used to $\sf\color{red}{style~a~element}$
$\sf\color{blue}{title}$: This will give the element a title, when hovered a box will popup with the value
$\sf\color{blue}{onclick}$: This determines what will happen after a user clicks the element,

Ultrilliam · Answer

HTML/CSS are not exclusive, to have one, you must have the other

Ultrilliam · Answer

Now then, for the tag (hyperlink) in order to give the tag the data it needs to know where you want it to go, you would use the $\sf\color{blue}{href}$ attribute Example: ``` text displayed here ``` or ``` https://questioncove.com/rules">Rules ```

Aureo · Answer

So that would make "Rules" blue and when you click on it it goes to https://questioncove.com/rules?

Ultrilliam · Answer

Correct

Ultrilliam · Answer

Special attributes for the tag This one has 2 special tags $\sf\color{blue}{src}$: This gives the browser the data to know where the image is located $\sf\color{blue}{alt}$: If this image cannot be loaded, this will show. Titles should ALWAYS be used. Example: ``` text here

``` or you can shorten it to ``` text here

``` That / before the end of the tag means the tag is self closing, and seeing as it's a image tag, you typically don't want to have anything in the tag, so this is fine. A example with it in use: ```

https://questioncove.com/images/qc/logo-xl.png" alt="QuestionCove Logo"/> ```

Aureo · Answer

:^)

Aureo · Answer

I know some HTML.

Ultrilliam · Answer

Little mistake right here

Ultrilliam · Answer

you put <img twice

Aureo · Answer

Whoops

Aureo · Answer

Good catch.

Aureo · Answer

How would I change the "Welcome to QuestionCove" text?

Ultrilliam · Answer

>notices the `Birthday Party Invitation!`

Ultrilliam · Answer

Oh, your in k12 and taking the web design course :P

Aureo · Answer

Yea. How'd ya know? Lol

Ultrilliam · Answer

I was in that course lol..

it was so easy ;~;

Aureo · Answer

It's easy.  I want to learn though. I'm not actually learning anything. :(

Ultrilliam · Answer

Anyway, to change ``` Welcome to QuestionCove! ``` you would simply edit "Welcome to QuestionCove!"

Aureo · Answer

Can you color the text?

Ultrilliam · Answer

using CSS yes, in this instance if you wanted to change the color of welcome to questioncove, you would change the style property "color" for the class "titletext"

that would look something like this:
```
.titletext {
color:purple;
}
```

Aureo · Answer

Ahhh. Okay

Aureo · Answer

I'm gonna try to do something from scratch.  If you want to explain more (general stuff) that'd be awesome.

Ultrilliam · Answer

Lets go onto the

Ultrilliam · Answer

Almost forgot, you can identify specific element paths lets say you have ``` QuestionCove ``` you could identify a in CSS using elmt a {} However this method would also pick up every a element no matter how deep you go under elmt if you wanted to select only the one DIRECTLY in elmt, and nothing below that in the DOM you would use elmt > a {}

Ultrilliam · Answer

Does that make sense?

Aureo · Answer

Yes!  Thanks a lot!

Ultrilliam · Answer

No problem, this should help me whenever someone asks me for lessons in the future as well :P

Now then, I suppose I'll need to talk about CSS properties and their values...

Aureo · Answer

I have one question.  With external style sheets, can I put them in a folder and link them that way or do I have to link them on the web?  I can't seem to find an answer on google.

Ultrilliam · Answer

You can indeed put them in a folder and link to them,

say you have index.html, and it links to a stylesheet in the location of /stylesheets/stylesheet.css

you would only need to create a folder in the same location as index.html, name it stylesheets, and then create the stylesheet.css file in that location

Ultrilliam · Answer

It is known as relative URLs

Aureo · Answer

Ahhh.  Okay.  Thanks

Ultrilliam · Answer

Lets go over some (basic) CSS Properties
$\sf\color{blue}{background}$: Sets the background, has sub-properties
       $\sf\color{teal}{background-color}$: Sets the background color
       $\sf\color{teal}{background-size}$: Sets the background size, syntax "width|height"
       $\sf\color{teal}{background-image}$: Sets the background image, syntax url('urlhere')
       $\sf\color{teal}{background-position}$: Sets the position of the background, syntax "x|y"
              $\sf\color{orange}{background-position-x}$: Sets the position of the background, syntax "x"
              $\sf\color{orange}{background-position-y}$Sets the position of the background, syntax "y"
       $\sf\color{teal}{background-repeat}$ Sets the repeat of the background, possible values ["no-repeat","repeat","repeat-x","repeat-y","round","space","unset"]
              $\sf\color{orange}{background-repeat-x}$: Sets the repeat of the background, possible values ["repeat","no-repeat","unset"]
              $\sf\color{orange}{background-repeat-y}$: Sets the repeat of the background, possible values ["repeat","no-repeat","unset"]

$\sf\color{blue}{border}$: Sets the border, has sub-properties, syntax is "width|style|color"
       $\sf\color{teal}{border-bottom}$: Sets the border, has sub-properties, syntax is "width|style|color"
              $\sf\color{orange}{border-bottom-color}$: Sets the color of the border at the location
              $\sf\color{orange}{border-bottom-style}$: Sets the style of the border, possible values are ["dashed","dotted","double","groove","inset","none","outset","ridge","solid","unset"]
              $\sf\color{orange}{border-bottom-width}$: Sets the width of the border at the location
              $\sf\color{orange}{border-bottom-left-radius}$: Sets the radius of the border at the location
              $\sf\color{orange}{border-bottom-right-radius}$: Sets the radius of the border at the location
       $\sf\color{teal}{border-top}$: Sets the border, has sub-properties, syntax is "width|style|color"
              $\sf\color{orange}{border-top-color}$: Sets the color of the border at the location
              $\sf\color{orange}{border-top-style}$: Sets the style of the border, possible values are ["dashed","dotted","double","groove","inset","none","outset","ridge","solid","unset"]
              $\sf\color{orange}{border-top-width}$: Sets the width of the border at the location
              $\sf\color{orange}{border-top-left-radius}$: Sets the radius of the border at the location
              $\sf\color{orange}{border-top-right-radius}$: Sets the radius of the border at the location
       $\sf\color{teal}{border-left}$: Sets the border, has sub-properties, syntax is "width|style|color"
              $\sf\color{orange}{border-left-color}$: Sets the color of the border at the location
              $\sf\color{orange}{border-left-style}$: Sets the style of the border, possible values are ["dashed","dotted","double","groove","inset","none","outset","ridge","solid","unset"]
              $\sf\color{orange}{border-left-width}$: Sets the width of the border at the location
       $\sf\color{teal}{border-right}$: Sets the border, has sub-properties, syntax is "width|style|color"
              $\sf\color{orange}{border-right-color}$: Sets the color of the border at the location
              $\sf\color{orange}{border-right-style}$: Sets the style of the border, possible values are ["dashed","dotted","double","groove","inset","none","outset","ridge","solid","unset"]
              $\sf\color{orange}{border-right-width}$: Sets the width of the border at the location
       $\sf\color{teal}{border-color}$: Sets the color of the entire border
       $\sf\color{teal}{border-image}$: Creates a border from a image, value syntax is "source|height|width|repeat"
              $\sf\color{orange}{border-image-repeat}$: Sets how to repeat the image, possible values are ["repeat","round","space","stretch","unset"]
              $\sf\color{orange}{border-image-source}$: Sets the url of the image of the border, value syntax is url('urlhere')
              $\sf\color{orange}{border-image-width}$: Sets the width of the image for the border
              $\sf\color{orange}{border-image-height}$: Sets the height of the image for the border
       $\sf\color{teal}{border-radius}$: Sets the radius for the entire border
       $\sf\color{teal}{border-style}$: Sets the style of the border, possible values are ["dashed","dotted","double","groove","inset","none","outset","ridge","solid","unset"]
       $\sf\color{teal}{border-width}$: Sets the width for the entire border

$\sf\color{blue}{color}$: Sets the color of text

Ultrilliam · Answer

That took forever and half to type

dude · Answer

"and a half" 
What half of forever?

Aureo · Answer

Made this.  Normal version uses an external CSS stylesheet. (Made this one so it's only one file.)

Aureo · Answer

Based on what Ultri said, I made a box with rounded corners and have an image with the width and height forced to be a certain px.  Also changed background, paragraph, and header attributes.

Aureo · Answer

@Ultrilliam

Ultrilliam · Answer

attachment

Ultrilliam · Answer

Do you see the issue?

Ultrilliam · Answer

while it does work, on some browsers this would just error.

Aureo · Answer

Hmm.  No quotes?

Ultrilliam · Answer

Not quite, you closed the p tag with a h1 tag ```

Box with rounded corners ```

Ultrilliam · Answer

It should have been ```

Box with rounded corners

```

Aureo · Answer

Oh.  Wow how'd I do that? Lol

Ultrilliam · Answer

x'D

Ultrilliam · Answer

Another thing I noticed
```
p {
	font-family: Comic Sans;
	font-size: 16pt;
	color: #000000;
	font-weight: normal;
	text-align: center
}
```
`font-family: Comic Sans;`
this should be `font-family: Comic Sans MS;`

Ultrilliam · Answer

Comic Sans is a Microsoft font, which is why it has the MS at the end there

Aureo · Answer

Ah.

Aureo · Answer

I'm looking at flex boxes now.  They look like they are easy to mess up.

Ultrilliam · Answer

I'm just gonna leave this here http://ultrilliam.com/random/canvas_testing.html For a cool effect, scroll :P

Aureo · Answer

Cool!

Aureo · Answer

Would you recommend flexboxes or floats for making a site?

Ultrilliam · Answer

I'd stay away from flexboxes unless you want limited browser support, and do it the complicated way. 
With math and %'s

Aureo · Answer

Ah.  Okay.

Ultrilliam · Answer

Post the code again here :P

Aureo · Answer

CSS Example

This makes the title larger, black, and centered.

This makes the paragraph text green and bold (strong).

Ultrilliam · Answer

Protip
\```
code here
\```

Aureo · Answer

?

Ultrilliam · Answer

``` CSS Example

This makes the title larger, black, and centered.

This makes the paragraph text green and bold (strong).

``` ^output

Aureo · Answer

Ah. K

Ultrilliam · Answer

I used a backslash to cancel out the parsing.
\```
code here
\```

Ultrilliam · Answer

however if I remove those \'s 
```
code here
```

Aureo · Answer

Just like discord. :^)

Ultrilliam · Answer

I'm not seeing the issue, you said the second p wasn't working?

Aureo · Answer

The first.

Aureo · Answer

I get:

Aureo · Answer

On all browsers.

Ultrilliam · Answer

Ah I see the trouble now.

You used unicode version of " somehow for the first one.

Ultrilliam · Answer

(for the class)

Aureo · Answer

Interesting.  How'd I do that?  Hmm..

Ultrilliam · Answer

That typically only happens if your using microsoft word though

Ultrilliam · Answer

(or other word processing software, rather then programming software)

Aureo · Answer

Nope, just notepad++.

Ultrilliam · Answer

Then that is strange, either way it happened

Aureo · Answer

Thanks.

Ultrilliam · Answer

your welcome :P

Ultrilliam · Answer

Lemme know if you have any other issues :)

Aureo · Answer

Will do!

Aureo · Answer

Another thing: When I do this: ``` Webmaster Roles CSS Assignment

Webmaster Roles

The role of a webmaster that I would enjoy the most would be web design. I enjoy designing non-internet creative devices so I believe I would also enjoy designing web pages. However, I understand that as a webmaster I would not only have to design the site from an aesthetic side, but also make sure that the technology behind the site is not out-of-date and that its performance is excellent. Also, the pay for the average webmaster is a comfortable $73,134, so I would be able to support myself in this field.

The responsibilities for this role are an understanding of current technology, creativity, mastery of the programming behind webpages, knowledge of the website's target audience, and the ability to communicate efficiently with clients. If I was employed as a webmaster, I would have to continue to stay involved in the HTML and similar communities to make certain that I understood current technologies. I would also have to have an eye for detail along with the ability to maintain website performance. To ensure that my clients are satisfied with my work I would have to know what the target audience for the website is, and revolve the website design around that. However, before all of those talents can be put to use, I must be able to talk to my clients in a polite and effective manner to assure that I fully understand my expectations for the job. If I use all of these in a smart manner, I will be able to make money and enjoy myself as a webmaster.

http://www1.salary.com/Webmaster-Salaries.html

https://www.divisionx.com/wp/professional-webmaster/

https://blog.udemy.com/webmaster-job-description/

``` The cit

s do not change color like the CSS tells it to do so, why would this be?

Ultrilliam · Answer

Changes color for me fine.
However I do have a few things to point out.
why are you putting p tags for urls and not a tags?
why is there a space between the number and pt for all the sizes (this is a syntax error)

Aureo · Answer

1.  This is for school, they want p tags.  
2. Didn't realize that was a syntax error.

Ultrilliam · Answer

1. Strange
2. Now you do

Also, is this how you intended it to look?

Aureo · Answer

Yes.

Ultrilliam · Answer

Also, for the Syntax error for the space in between the number and pt, without that it would look like this

Aureo · Answer

Haha.

Aureo · Answer

I am proud of this:

Aureo · Answer

Too bad marquee is no longer supported.  Doing that in CSS is a lotta lines.

Ultrilliam · Answer

Well, I mean, its not that it's not "supported" It's deprecated and frowned upon. Same as the center tag, and yet I still use it lol

Aureo · Answer

Yeah.  HTML doesn't like it.  Browsers are okay with it.

Aureo · Answer

It should have a black header that has the webpage name + hamburger menu

Ultrilliam · Answer

?

Ultrilliam · Answer

am I missing something

Aureo · Answer

Scroll up. Lotsa code

Ultrilliam · Answer

you mean the "Webmaster Roles CSS Assignment"?

Ultrilliam · Answer

I got the notification that you posted something, but didn't see anything... strange, perhaps it failed to post O.o

Ultrilliam · Answer

Yea, from the looks of it that failed to post even now. I can see it because it got through the even system though, strange.

Aureo · Answer

hmm

Ultrilliam · Answer

Strange, anyway I'll get on looking at that

Ultrilliam · Answer

is that really all the CSS? if it was working before, then perhaps you accidentally deleted some stuff?

Ultrilliam · Answer

there is no CSS for this at all

Ultrilliam · Answer

(tag me when you reply)

Aureo · Answer

That is on another CSS file, they're separated.  That thing is okay.

Aureo · Answer

@Ultrilliam

Ultrilliam · Answer

Ah I see what you mean now, you have this ``` .header { background-color: #222222; color: white; padding: 10px; } ``` yet for some reason its not being applied to ``` ```

Ultrilliam · Answer

I noticed for ``` Awesurio Home Page ``` it's a h tag (which doesn't exist) and not a h1, which is likely what you meant. However I'm stumped as you on why .header class is not being applied to that div actually... that is strange... Even in inspect element, if I try to add a CSS class to it, it won't even let me do anything, and disappears before I can edit anything... strange

Aureo · Answer

The h1 thing was an accident.  No clue why .header isn't working

Ultrilliam · Answer

Nor do I, very strange indeed

Aureo · Answer

@Ultrilliam
I figured out why the header wasn't working.  The CSS was mad because I forgot to close the P tag attributes.  So it ignored everything after P (which included .header).

Ultrilliam · Answer

oh! I didn't even notice that!

Ultrilliam · Answer

How did such a simple syntax error slip past me? O>o

Aureo · Answer

Ikr, me neither.

Ultrilliam · Answer

Usually I'm good at catching syntax errors

Aureo · Answer

I noted that img was white instead of the red color my program makes it, but I didn't know why.  XD

Aureo · Answer

I also figured out how to wrap words to the size of the screen.

Aureo · Answer

Now that I have my framework I need to figure out what to put in my site.

Ultrilliam · Answer

You could use percentages, vh or vw to change text size based on screen size

Ultrilliam · Answer

Although that is much more difficult to pull off properly.

VH = vertical height, 
VW = vertical width.

Aureo · Answer

Not sure what vh or vw is, but I used percentages along with making divs wrap in the CSS.

Ultrilliam · Answer

for example 32vw text

Ultrilliam · Answer

would be this big on my screen

Aureo · Answer

Ah.  This is my div code (it works):

Ultrilliam · Answer

Be careful with -webkit properties, you also need the other property versions for compatibility reasons!

Aureo · Answer

Hmm.  I meant to put them in there.

This is how my site looks so far:

Ultrilliam · Answer

:ok_hand:

Aureo · Answer

This is really exciting.  I borrowed some code and changed it a little for the hamburger menu.  It turns into lightsabers lol.

Ultrilliam · Answer

x'D

Aureo · Answer

attachment

Ultrilliam · Answer

I see you discovered box shadows and shadows x'D

Aureo · Answer

Yes I did. Lol

Aureo · Answer

@Ultrilliam

Ultrilliam · Answer

one sec

Aureo · Answer

k

Aureo · Answer

My problem is that from the invitation page I can't get back to the main "My Profile" page.

Ultrilliam · Answer

change ``` My Portfolio ``` to ``` My Portfolio ``` and you should be golden

Ultrilliam · Answer

@Aureo ._____. you alive?

Ultrilliam · Answer

@jaynater

jaynater · Answer

I forgot how to link .css and .html

jaynater · Answer

gj me

Ultrilliam · Answer

@EvieSwan2405

EvieSwan2405 · Answer

$\color{#0cbb34}{\text{Originally Posted by}}$ @Ultrilliam
@EvieSwan2405
$\color{#0cbb34}{\text{End of Quote}}$
Hey where am I supposed to do this coding???? xD

Ultrilliam · Answer

You can upload HTML files to questions evie ¯\_(ツ)_/¯

1 attachment

1 attachment

1 attachment

1 attachment

1 attachment

1 attachment

1 attachment

1 attachment

1 attachment

1 attachment

1 attachment

1 attachment

1 attachment

1 attachment

1 attachment

1 attachment

3 attachments

1 attachment

1 attachment