WordPress Editor Issues & HTML/CSS Getting Started – Tutorial [w/ subs]



00:00:00 – Steve here um I've run across the
00:00:03 – scenario working the WordPress and a
00:00:04 – client where it seems to me that
00:00:07 – understanding of HTML may actually help
00:00:10 – with trying to write content in the post
00:00:13 – editor in WordPress now first of all if
00:00:18 – you want to be on the same page as me
00:00:19 – there's a couple of things you might
00:00:21 – want to follow along sublime text com if
00:00:25 – you're using desktop you can use this to
00:00:27 – UM follow along the HTML if you like or
00:00:30 – you can use a word pad or text edit in
00:00:37 – Mac that's fine secondly there is
00:00:40 – something that got going on here in the
00:00:42 – post editor or when you look at the text
00:00:44 – view you can have this little view here
00:00:46 – when you write certain things it will
00:00:48 – text highlight it so it's easier to
00:00:51 – actually pick out what's going on and
00:00:53 – for that you can go to the plugins page
00:00:56 – and click add new and type um WP editor
00:01:01 – i've already installed it which you can
00:01:05 – see it's actives install that and once
00:01:07 – you install that you can go down here to
00:01:09 – the bottom left to the wp editor and go
00:01:12 – to the post editor and come down and
00:01:14 – pick theme mono kai that helps it stand
00:01:17 – out be go ahead and close that what I
00:01:20 – want to point out here is something to
00:01:22 – kind of help you sort of get your
00:01:25 – writing right if you used to award a
00:01:27 – word processor like word or openoffice
00:01:30 – it in here it conforms to a certain
00:01:34 – behavior when you're creating your
00:01:35 – document with your new lines and whatnot
00:01:38 – but the elements in HTML especially when
00:01:40 – you're writing on the back end of ward
00:01:42 – in the wordpress editor when that
00:01:44 – translates to the front page it's going
00:01:46 – to conform to the rules of HTML and
00:01:48 – specifically the rules of the HTML in
00:01:50 – applied to the theme that you are using
00:01:52 – um and it helped a little bit to kind of
00:01:56 – understand some fundamentals in HTML
00:01:59 – you'll need to be able to write the
00:02:00 – entire thing but on to outline the
00:02:02 – basics of an HTML document and to subset
00:02:04 – of that that applies to the editor and
00:02:07 – one of the examples here was like say we
00:02:10 – had a block quote
00:02:13 – test to check Ellen will check insertion
00:02:19 – image insertion what was happening here
00:02:24 – is one of the things that was being used
00:02:27 – was a blockquote and believe what
00:02:30 – happened was is something to discount
00:02:33 – block quoted which can't really see here
00:02:35 – I'll show you in a preview and I have to
00:02:36 – go to the beginning in line and click
00:02:39 – say you wanted to put an image before it
00:02:41 – I what was the existing it was that
00:02:43 – image yeah and i think it was left
00:02:46 – aligned go ahead it looks kind of fine
00:02:51 – here watch what happens when we preview
00:02:53 – the styling for the blockquote actually
00:02:58 – has this line in front of it and it has
00:03:00 – a little bit of space and then you have
00:03:01 – the block quote because of what happened
00:03:04 – here the image is interfering with it um
00:03:06 – before I show you the fix to this I'm
00:03:10 – going to show you some basic HTML um
00:03:11 – open if you got sublime text openness
00:03:15 – and what you want to do is save this as
00:03:18 – a index dot HTML is what your default
00:03:24 – name is for an HTML but you can name the
00:03:25 – page that then whatever you want to have
00:03:28 – to have a dot HTML in so you want to do
00:03:30 – save and pick any location on him know
00:03:34 – where this is but I'll put mine in
00:03:36 – dropbox and then let's see we'll call it
00:03:43 – um index dot HTML swear i'm going to
00:03:47 – call it ok right in HTML it's not a
00:03:50 – programming language so it shouldn't be
00:03:52 – intimidated by it you could look at the
00:03:55 – name of an HTML means hypertext markup
00:03:57 – language the ml part it's not PL
00:03:59 – programming language all you're doing is
00:04:01 – specifying where certain effects happen
00:04:04 – in the text when you wrap tags around
00:04:07 – the text and now you may not know what a
00:04:09 – tag is but it's basically you use I'm
00:04:12 – going to actually increase the size of
00:04:14 – this real quick you use and less than
00:04:17 – for the beginning of the tag on the
00:04:20 – first part and you type whatever the tag
00:04:22 – name is I'm just going to say tag then
00:04:24 – you close it that's the beginning tag
00:04:25 – you'll have a less than
00:04:27 – whatever the name of the tag is and then
00:04:29 – a greater them to end the tag you'll go
00:04:31 – less than press / now sublime text
00:04:35 – automatically finishes that for you but
00:04:37 – you'll go less than front / and then the
00:04:41 – name of the tag and then greater than if
00:04:42 – you're not using something like sublime
00:04:44 – then you're going to have to type it
00:04:45 – manually then you can open them up and
00:04:50 – write your stuff in between whatever but
00:04:51 – tag itself doesn't do anything HTML has
00:04:54 – a predefined structure I'm going to go
00:04:57 – ahead and use the shortcut and sublime
00:04:58 – to do this you go ahead and just type
00:04:59 – HTML tab and it will give you the
00:05:01 – structure the this is a self-contained
00:05:05 – tag it looks like it starts but there is
00:05:07 – no want to go ahead and copy this to
00:05:09 – show you there is no closing tag like
00:05:12 – this with a front slash in front of it
00:05:15 – that's that's not a thing um
00:05:16 – self-contained tags will just be one
00:05:19 – there won't be a closer one and
00:05:21 – sometimes there will be like this and
00:05:23 – sometimes you will be see a front slash
00:05:24 – at the end of the self-contained tag but
00:05:28 – that's irrelevant the beginning at the
00:05:31 – top you need a exclamation doctype and
00:05:33 – you tell it you want HTML and that's
00:05:35 – self-contained tag then when you look at
00:05:37 – the underlines here that's the starting
00:05:39 – tag and ending tag where its associated
00:05:42 – with go ahead and sometimes now these
00:05:45 – are on the same level but just for so
00:05:46 – that you can kind of see it in one space
00:05:49 – these are the ones that are on the same
00:05:50 – level HTML and then you put the body and
00:05:52 – everything in um but for in practice I
00:05:57 – mean it's you don't really have to do
00:05:59 – that but I was just so it's easier here
00:06:01 – you go you got a HTML tag this contains
00:06:02 – the body of the document HTML has a head
00:06:06 – and a body the head is like this stuff
00:06:10 – that loads at the beginning of the page
00:06:11 – and you have like a title and that's
00:06:13 – what appears in the browser tab in your
00:06:16 – browser there's some other stuff can go
00:06:18 – there and there's some non-standard
00:06:19 – stuff that they're not showing but i'm
00:06:21 – going to retype all this stuff from
00:06:22 – scratch so let's open up with a left an
00:06:25 – exclamation HTML okay now let's create
00:06:29 – the HTML tags like i said you can make
00:06:32 – it think of it like sandwiches you can
00:06:33 – do HTML and then come down and then
00:06:37 – create the integ and
00:06:38 – you can sandwich you in between now you
00:06:40 – can go ahead and hit tab and you can
00:06:42 – open your head tag oops messed up and
00:06:46 – then close your head tag in between your
00:06:48 – head tag you can have your title up in
00:06:52 – your title and then go ahead and close
00:06:54 – your title then what I like to do is
00:06:55 – open and close it so you don't forget it
00:06:57 – and then coming in the middle I can't
00:06:59 – say that enough don't try to remember to
00:07:02 – close your tags go ahead and close the
00:07:04 – tag and then insert in the middle and
00:07:05 – then you want to worry about it and i'll
00:07:07 – put test homepage here now there's
00:07:09 – something else you got tags but tags can
00:07:12 – have properties if you come into a tag
00:07:14 – at the beginning tag that start tag you
00:07:16 – can come right before the greater than a
00:07:18 – hit a space and then you can put in a
00:07:20 – property if that tag supports a property
00:07:22 – HTML tag actually supports a property
00:07:26 – called language is language you can put
00:07:28 – an equals lang equals and then put open
00:07:31 – and close quotes sublime does a lot of
00:07:33 – shortcuts you can put one quote and
00:07:35 – you're always going to indicate so it'll
00:07:36 – go ahead and put it there for you and it
00:07:38 – puts the cursor in between it by the
00:07:40 – plan and then you put me in for English
00:07:42 – or if you want to put it put a specific
00:07:44 – version like say US English you can do
00:07:45 – that but I'm just going to put English
00:07:47 – um then in the head here's your title
00:07:50 – something this also comments a meta tag
00:07:52 – it's a self-contained tag like this one
00:07:54 – up here um you can type meta space and
00:07:58 – you can put care setproperty equals and
00:08:01 – you can say utf-8 which is unicode and
00:08:05 – then close it now you can do this but
00:08:07 – that's but like HTML for sort of stuff
00:08:10 – you don't have to do that but it's a
00:08:12 – self-contained tag now then the last
00:08:14 – thing is you need a body and open your
00:08:17 – body tag and close your body tag and
00:08:19 – then you can go ahead and write test txt
00:08:22 – and hit your period and then in salaam
00:08:26 – you'll see the circle means you haven't
00:08:27 – saved if you command s you'll see that
00:08:30 – it's said and also at the top can see
00:08:32 – that file blues out but on Windows it's
00:08:34 – a little different I went ahead and
00:08:36 – saved i'm going to come over here open a
00:08:38 – new tab and then go to the top and hit
00:08:41 – open file and then scroll down to my
00:08:45 – index.html and open it and here's my in
00:08:48 – my tab you see test home page at the top
00:08:50 – and down here you see test text now
00:08:52 – and thing that leads to a lot of
00:08:53 – confusion in the in the wordpress editor
00:08:58 – is white space it doesn't care about
00:09:00 – high space or else you probably haven't
00:09:02 – to be doing something like this if they
00:09:04 – cared like where it's all online but you
00:09:07 – don't have to do that right you can it
00:09:11 – only recognize his up to one space in
00:09:13 – between text elements like you can see
00:09:16 – there it's really put this list of it
00:09:17 – let me get you zoom in a little bit
00:09:19 – there you go see one space I don't care
00:09:22 – how many you put in here save it again
00:09:24 – refresh now you can hit this to refresh
00:09:28 – to get the page back or you can hit
00:09:30 – command are on Mac or ctrl R and windows
00:09:34 – or f5 and windows don't care how many
00:09:37 – especially put him there the only one
00:09:38 – you're going to get more spaces past the
00:09:39 – first one if you do a shortcut you can
00:09:42 – put ampersand non-breaking space and
00:09:46 – then put a semicolon and that will put
00:09:49 – you one more space save it and then
00:09:51 – refresh you can put more of these and
00:09:53 – keep typing them over and over again and
00:09:55 – then you get moisture basis okay now
00:10:01 – this is you only have to type this stuff
00:10:03 – in the wp text editor you'll have to do
00:10:06 – it in visual right in fact when you hit
00:10:10 – enter in the text editor it inserts a
00:10:12 – non-breaking space ok now another thing
00:10:15 – is normally text is wrapped in a
00:10:17 – paragraph tag if you see this normally
00:10:19 – that's the paragraph tag and just like
00:10:21 – you don't see those extra spaces if you
00:10:24 – write more text this will be on the same
00:10:29 – line you go ahead and there you go
00:10:32 – that's on the same line inside the same
00:10:35 – paragraph tag you can insert what's
00:10:37 – called a break tag and then this will
00:10:40 – force it on to a new line but it's still
00:10:42 – in the same go ahead and do inspect you
00:10:45 – can see in in the editor when you expand
00:10:48 – this tag this is actually the same
00:10:50 – element see this P tag down here you can
00:10:52 – see that blue space in the middle censor
00:10:53 – it means they're in the same element me
00:10:56 – refresh now if you wanted them in
00:11:00 – different paragraph tags you can
00:11:01 – actually close the first tag right and
00:11:05 – then
00:11:06 – enter and then open a new tag hold on p
00:11:10 – and now you've got two different
00:11:12 – paragraphs right and come up here and
00:11:14 – hit refresh now they're a little bit
00:11:16 – more spaced apart that's because
00:11:18 – paragraphs actually have you see that
00:11:20 – space the margins can overlap between
00:11:23 – two elements um but those are margins
00:11:27 – that you see around there and that's
00:11:29 – what pushes them apart now this whole
00:11:31 – concept of of the tags is pretty
00:11:34 – important because like say if you got a
00:11:36 – block quote look which is the example
00:11:37 – that i'm going to show you block quote
00:11:43 – okay let's refresh the page it's got a
00:11:47 – little bit of indention now to put some
00:11:49 – style into this this is basic HTML and
00:11:52 – i'm going to get to that in the browser
00:11:53 – i just one kind of show you what's going
00:11:55 – on you can open a style tag and then
00:11:58 – close a style tag and you put CSS styles
00:12:01 – in here and what sec that's comprised of
00:12:03 – is if you want style the body and go
00:12:05 – bodyspace and then open a curly brace
00:12:07 – and then hit you're going to have to
00:12:10 – close your curly brace if it doesn't
00:12:11 – automatically do it but make sure you
00:12:12 – open and close your curler bracing and
00:12:13 – in here in the middle you can type
00:12:14 – background color colon space and you can
00:12:21 – say you want it to be black right and
00:12:25 – then that's going to be black on black
00:12:28 – for the text i'm gonna come back over
00:12:30 – here and show you it's all black you
00:12:31 – can't see the text you can come over
00:12:32 – here below it you can say color colon
00:12:34 – white and then yours in your semicolon
00:12:38 – hit ctrl this command dance rather come
00:12:40 – over here refresh now you can see your
00:12:42 – text now you can come over here in style
00:12:44 – blockquote I just do in this number
00:12:47 – block quote the name of the tag space
00:12:50 – open close curly braces and then you can
00:12:52 – say border colon and it Sublime puts in
00:12:57 – your semicolon at the end you have to in
00:12:59 – your lines and semicolons on your CSS
00:13:01 – and you can put in here one or no one
00:13:05 – sec 2 pixels space and i want a solid
00:13:09 – border and i want
00:13:15 – I'm gonna say red okay go ahead and
00:13:22 – refresh it you got you got a red border
00:13:25 – that shows you the entire limit now you
00:13:27 – can get picky like I've got on this page
00:13:30 – and i want to say border left it's going
00:13:32 – to be two pixels it's going to be on the
00:13:35 – left side I'm go ahead and refresh it
00:13:37 – and you can see on the left bc it's
00:13:38 – jammed up in here and there's normally a
00:13:40 – bit of a space in front of that you can
00:13:42 – come over here and you can do padding
00:13:44 – left arm say five pixels right or one
00:13:51 – character space which is 1am refresh and
00:13:56 – you've got a space now you're seeing
00:13:58 – something sort of similar to what is
00:14:00 – going on to the site and I just wanted
00:14:03 – to sort of show you how that works now
00:14:04 – um you could do some other stuff like
00:14:07 – you can change this to a class by
00:14:10 – putting a dot in the front or an ID by
00:14:12 – putting in a hash in front of fact on
00:14:16 – the foot there's only one body but
00:14:19 – there's many block quotes which is a
00:14:21 – perfect example you can put a hash in
00:14:23 – front of the body and you can put a dot
00:14:24 – in front of the block quote same thing
00:14:26 – but if you save and come over here
00:14:27 – Styles gone come back over here and what
00:14:30 – you want to do is on your body you want
00:14:32 – to give it an ID of body right going to
00:14:37 – come back over here and save it you can
00:14:38 – see the body over here and you come back
00:14:40 – in you save and you can see it gives you
00:14:42 – the body style oops messed up and then
00:14:46 – you come over here and give your
00:14:48 – blockquote class of blockquote that I
00:14:52 – made save it come back over here and
00:14:55 – refresh and you've got your Styles back
00:14:57 – this gives you the ability to do all
00:14:59 – sorts of different things because
00:15:01 – sometimes you don't want to make every
00:15:02 – element look the same you'll have
00:15:04 – sometimes two different kinds of
00:15:05 – paragraphs that look different now this
00:15:08 – is let me shrink this down this is CSS
00:15:10 – um let's see I am yeah I had to check
00:15:19 – make sure the video still going i want
00:15:20 – to do all this month okay so basically
00:15:22 – that's your CSS okay now that's why
00:15:26 – things look like they do now now that
00:15:28 – you've got an eye
00:15:29 – for what that looks like I'm gonna come
00:15:31 – over here in the back end here's your
00:15:32 – visual tag to have and then here's a
00:15:34 – block quote you can't see all the
00:15:36 – styling I've got it applied so that the
00:15:37 – editor looks similar to the front page
00:15:39 – come over here to the text and then I'm
00:15:41 – going to go full spring and you can see
00:15:44 – let me get this jacked up a bit you can
00:15:49 – see I'm talking about the sandwich is
00:15:51 – the one at the beginning when you don't
00:15:53 – really know what you're looking at you
00:15:54 – got the block quote and when you put
00:15:56 – your character when you put your let me
00:15:58 – come back down when you put your cursor
00:16:01 – right at the beginning it's placing it
00:16:04 – inside of that block quote in the end
00:16:06 – the HTML so I'm going to go back to the
00:16:08 – text and what you can see here is you
00:16:11 – can see this image tag and it goes all
00:16:13 – the way to here and this is the HTML for
00:16:16 – style can be like that but you don't
00:16:17 – want to necessarily format and stuff
00:16:19 – back here because W word press is going
00:16:21 – to put it however so you could copy all
00:16:23 – this and cut it or cut it all out and
00:16:25 – move it the easier thing would be is to
00:16:27 – take this beginning blockquote and then
00:16:29 – cut it out with a command extra control
00:16:32 – x and then come back here sorry in front
00:16:35 – of where the intent of black folk is and
00:16:36 – paste it back in with control a
00:16:38 – commander control V and then you can go
00:16:40 – ahead and let me go ahead and zoom this
00:16:43 – back out and go back to visual the
00:16:46 – visual won't change but what you can do
00:16:47 – is you can regenerate your preview or
00:16:49 – publish when you come back here instead
00:16:51 – of the blockquote styling being well
00:16:53 – over here it's over here um now what
00:16:56 – actually happens sometimes is on this
00:16:59 – right here won't matter of fact let me
00:17:02 – get copy the image address come back
00:17:05 – over here to our other example and let
00:17:08 – me place a let me place a and images on
00:17:13 – here let's open our blockquote up plan
00:17:17 – and then let's put an image inside of
00:17:22 – this and then click go ahead and close
00:17:24 – your image space and then you want your
00:17:25 – image source to be a paste in the URL
00:17:28 – that's the URL to the image that was
00:17:30 – loading in the same scenario I'm going
00:17:33 – to go ahead and save this come back over
00:17:35 – here and reopen and I shouldn't have
00:17:36 – closed it because this is a great
00:17:37 – example because I have something fixed
00:17:39 – on the site that doesn't happen by
00:17:41 – default
00:17:42 – and we can open a file and come down and
00:17:46 – open and I'm goofball just passing it I
00:17:52 – little bear index sorry okay you can see
00:17:57 – here that this line is over there right
00:17:59 – and even if i want to say if i take it
00:18:03 – out okay well it may not reproduce it
00:18:06 – exactly because the code on the type of
00:18:08 – them becomes i check it out of here okay
00:18:10 – yeah see how it went down to the next
00:18:12 – line also don't think let's see let me
00:18:16 – style this image real quick to be float
00:18:20 – left like it is on a page yep that's
00:18:27 – exactly what happened on the same page
00:18:28 – you see it all jammed up here and you
00:18:30 – can't see the line right now there's
00:18:32 – this little thing that you can do called
00:18:34 – overflow hidden go and say come back and
00:18:42 – now you can see it over here but it's
00:18:45 – jamming up right next to the image and
00:18:47 – how you would handle that is on your
00:18:48 – block quote you could style with the arm
00:18:50 – patting left gives you this space here
00:18:53 – right margin goes outside of the
00:18:56 – container you can go margin left and you
00:19:00 – can say one am also right save it come
00:19:04 – back and then when this same amount of
00:19:06 – space should appear in front of the red
00:19:08 – line but before the image should go and
00:19:10 – refresh it oh did it save it's not doing
00:19:15 – it is it oh wait margin over overlaps on
00:19:18 – darn image margin right let's say one E
00:19:30 – and embedded a vegetable more oh wait
00:19:34 – the image has a margin that works yeah
00:19:36 – there you go that's basically how you
00:19:38 – resolve at the arm you don't want to
00:19:42 – muck around the CSS but the big the big
00:19:44 – lesson here is when you're working in
00:19:46 – here don't embed tags inside of other
00:19:51 – tags and that amounts to don't like put
00:19:54 – your cursor and for
00:19:55 – like to see how this block woods
00:19:56 – automatically highlighted right if you
00:19:59 – go ahead and hit this it's going to keep
00:20:01 – block quoting you have to unblock quote
00:20:03 – this one and this one's still blocked
00:20:06 – quoted that's the problems when you got
00:20:08 – your text cursor next to an element it's
00:20:10 – going to try to absorb the properties
00:20:12 – well that's all for this tutorial and I
00:20:17 – hope you found it helpful you can like
00:20:18 – or share leave comments if you have any
00:20:21 – questions or if you want to request
00:20:23 – other videos just hit me up in the
00:20:24 – comments take these guys


Video Url:
http://youtu.be/BsWsfGJuBdk

Comments

comments